Help tạo select option

thoigian07 · 31/12/16

Mình muốn tạo select option như trong hình , khi chọn server này thì nó hiện thông tin ra , chọn cái khác thì nó hiện thông tin bên server khác ra
pro nào biết hướng dẫn cho mình với , tks mọi người nhiều

thoigian07 · 31/12/16

pro nào biết giúp mình với !!

gunshot9x · 31/12/16

Mã:

function getValSelect(val) {
    var idServer = val.value;
    ...
}
<select id="listSelect" onchange="getValSelect(this)">
<option value="1">Server 1</option>
<option value="2">Server 2</option>
<option value="3">Server 3</option>
<option value="4">Server 4</option>
</select>

thoigian07 · 31/12/16

gunshot9x:

Mã:

function getValSelect(val) {
    var idServer = val.value;
    ...
}
<select id="litSelect" onchange="getValSelect(this)">
<option value="1">Server 1</option>
<option value="2">Server 2</option>
<option value="3">Server 3</option>
<option value="4">Server 4</option>
</select>

Bạn nói chi tiết được ko , cái này ko rỏ lắm phần csdl thì mình viết chổ nào , sao cho nó kết nối tới option nhỉ

gunshot9x · 31/12/16

code trang web của bạn phải echo sẵn csdl thông tin các server ra, xong dấu vào div visibility:hidden

còn code trên lấy giá trị của bạn khi chọn lựa gửi vào idServer, từ đó bạn dùng idServer lấy được để thay đổi thuộc tính visibility
của div tương ứng

thoigian07 · 31/12/16

gunshot9x:
code trang web của bạn phải echo sẵn csdl thông tin các server ra, xong dấu vào div visibility:hidden

còn code trên lấy giá trị của bạn khi chọn lựa gửi vào idServer, từ đó bạn dùng idServer lấy được để thay đổi thuộc tính visibility
của div tương ứng

-Code lấy thông tin tên server

Mã:

                     <select id="litSelect" onchange="getValSelect(this)">								<?php	
									global $svList; 	
			                       	foreach ($svList as $value) {
			                       		echo "<OPTION VALUE='{$value['id']}' ";
			                       		if ($value['id'] == $sid['id']) echo "selected='selected'";
				                        echo ">{$value['svName']}</OPTION>";
			                       	}
			                     ?>									
								</SELECT>

-Code xuất dữ liệu ra

Mã:

<table class="tftable1" style="width:90%">						<tr>
							<th>STT</th><th>Tên nhân vật</th><th>Cấp độ</th><th>Môn phái</th>
						</tr>
						<?php
						
							$oChar = new oChar($sid); 
							$charList = $oChar->getTopCharList();
							if ($charList)
							foreach ($charList as $key) {
								echo "<tr><td>{$key['']}</td><td>{$key['charname']}</td><td>{$key['level']}</td></tr>";
							
							}
						?>		
                        
					</table>

-Chỉ có server 1 là chạy thôi con 2 cái còn lại thì ko chạy

gunshot9x · 31/12/16

Bạn vẫn chưa hiểu ý mình, cách của mình là trả lại danh sách của tất cả server và ẩn đi những danh sách của các server không được lựa chọn, tránh việc request nhiều lần đến server mỗi khi bạn change option

$oChar = new oChar($sid); => class nhân vật của server có $sid
$oChar->getTopCharList(); => lấy thông tin top nhân vật của server có $sid
cái này chỉ trả lại giá trị một server, bạn cần một vòng foreach($ListServer as $sid) để trả lại toàn bộ danh sách top nhân vật của tất cả server

Mã:

<script>function getValSelect(val) {
    var idServer = val.value;
    var listServer = ["1", "2", "3", "4"]; // danh sach gia tri option[value] và div[id] cho tung server
    
    // an tat ca server khong duoc chon
    for(var index in listServer){
        if(listServer[index] == idServer){
            document.getElementById(listServer[index]).style.visibility = "visible";
            document.getElementById(listServer[index]).style.display = "block";
        }else{
            document.getElementById(listServer[index]).style.visibility = "hidden";
            document.getElementById(listServer[index]).style.display = "inline";
        }
    }
}
</script>


<style>
.hide{visibility:hidden;display:inline;}
</style>


<select id="listSelect" onchange="getValSelect(this)">
<option value="1">Server 1</option>
<option value="2">Server 2</option>
<option value="3">Server 3</option>
<option value="4">Server 4</option>
</select>


<!-- danh sach hien thi mac dinh -->
<div id="1">Danh sach Server 1</div> <!-- hien server 1 -->
<div id="2" class="hide">Danh sach Server 2</div> <!-- an server 2 -->
<div id="3" class="hide">Danh sach Server 3</div> <!-- an server 3 -->
<div id="4" class="hide">Danh sach Server 4</div> <!-- an server 4 -->

thoigian07 · 1/1/17

Khi mình chọn server 1 nó xuất hiện ok
Khi mình chọn server 2 thì nó hiện thì ra và nằm tuốt ở dưới , trong khi đó server 1 đã có thuộc tính ẩn rồi , nó để lại khoản trống như hình , pro xem giúp mình với

gunshot9x · 1/1/17

div, table mặc định display: block (khối) nên nó chiếm một khoảng chống nếu hidden, vì vậy phải thiết lập display: none (không chiếm chỗ) hoặc display: inline (hiển thị cùng một dòng) tùy theo mục đích mà chọn, ở đây do bạn chèn table vì vậy sẽ chọn display: none

Mã:

<script>function getValSelect(val) {    var idServer = val.value;
    var listServer = ["1", "2", "3", "4"]; // danh sach gia tri option[value] và div[id] cho tung server
    
    // an tat ca server khong duoc chon
    for(var index in listServer){
        if(listServer[index] == idServer){
            document.getElementById(listServer[index]).style.visibility = "visible";
            document.getElementById(listServer[index]).style.display = "block";
        }else{
            document.getElementById(listServer[index]).style.visibility = "hidden";
            document.getElementById(listServer[index]).style.display = "none";
        }
    }
}
</script>


<style>
.hide{visibility:hidden;display:none;}
</style>


<select id="listSelect" onchange="getValSelect(this)">
<option value="1">Server 1</option>
<option value="2">Server 2</option>
<option value="3">Server 3</option>
<option value="4">Server 4</option>
</select>


<!-- danh sach hien thi mac dinh -->
<div id="1">Danh sach Server 1</div> <!-- hien server 1 -->
<div id="2" class="hide">Danh sach Server 2</div> <!-- an server 2 -->
<div id="3" class="hide">Danh sach Server 3</div> <!-- an server 3 -->
<div id="4" class="hide">Danh sach Server 4</div> <!-- an server 4 -->

Help tạo select option

thoigian07

gunshot9x

thoigian07

gunshot9x

thoigian07

gunshot9x

thoigian07

gunshot9x

Bài viết mới nhất

Thống kê

Bài viết được quan tâm nhiều