[HTML/Javascript] Dropdownbox(combobox) value change, visible or hidden

  • Thread starter Thread starter gigamesh
  • Ngày gửi Ngày gửi
G

gigamesh

T.E.T.Я.I.S
Lão Làng GVN
Mình đang làm 1 form nhập dữ liệu, ví dụ form này có 2 combobox
<SELECT>
<OPTION value=1>Option 1</OPTION>
<OPTION value=2>Option 2</OPTION>
</SELECT>
Click to expand...
<SELECT>
<OPTION value=3>Option 1.1</OPTION>
<OPTION value=4>Option 1.2</OPTION>
<OPTION value=5>Option 2.1</OPTION>
<OPTION value=6>Option 2.2</OPTION>
</SELECT>
Click to expand...
Mình muốn khi chọn Option 1 ở combobox đầu tiên, ở combobox thứ 2 sẽ chỉ hiển thị 2 option là 1.1 và 1.2 . Nếu chọn Option 2 thì ở combobox 2 sẽ hiển thị 2 option là 2.1 và 2.2. Ko biết có đoạn code js hoặc cách nào khác có thể làm dc như thế ko.
- Nếu cách trên ko thể làm dc thì mình muốn làm 1 cách khác là tách cái combobox thứ 2 ra thành 2 cái combobox 2 và 3, 2 cái này mặc định là hidden. Khi chọn option 1 ở combobox 1 thì combobox 2 sẽ hiện ra, chọn option 2 thì combobox 3 sẽ hiện ra
Mong các bạn giúp đỡ :D
 
if (document.getElenmentById('select1').value="1")
document.getElenmentById('select2').value="3"
 
#2: 2 dấu = ở dòng đầu tiên thì phải!
#1:
Test xem thử:
<html>
<head>
<script language = "JavaScript">
function quickSelect() {
var bnd = document.form1.test.value;
if (bnd == "1") {
document.form1.s1[3].selected = "1"; //ở đây dùng mảng, bắt đầu từ 0
}
else{
document.form1.s1[2].selected = "1";
}
}
</script>
</head>
<body>
<form name="form1">
<SELECT name="s1">
<OPTION value="3">Option 1.1</OPTION>
<OPTION value="4">Option 1.2</OPTION>
<OPTION value="5">Option 2.1</OPTION>
<OPTION value="6">Option 2.2</OPTION>
</SELECT>
<p>

<SELECT name="test" onchange="quickSelect();"> <!-- su kien onchange khi có sự thay đổi -->
<OPTION value="1">Option 1</OPTION>
<OPTION value="2">Option 2</OPTION>
</SELECT>
</form>
</body>
</html>
 
Cảm ơn các bạn, mình đã tìm dc 1 đoạn code rất hay

var bmCheckResultArrB = {
B11 : 'Lún, nghiêng lệch',
B12 : 'Hư hại do va chạm',
B13 : 'Nứt',
B14 : 'Bong tróc, hở rỉ cốt thép',
B15 : 'Hỏng đá xây',
B16 : 'Giảm yếu tiết kiện kết cấu',
B17 : 'Liên kết lỏng, kém'
};

var selbox = document.getElementById('bmCheckLnResult');
selbox.options.length = 0;

if (chosen == " ") {
selbox.options[selbox.options.length] = new Option(' ',' ');
}


if (chosen.match(/B.*/)) {
for(index in bmCheckResultArrB) {

selbox.options[selbox.options.length] = new Option(bmCheckResultArrB[index], index);
}
}
Click to expand...
dòng code
selbox.options[selbox.options.length] = new Option(bmCheckResultArrB[index], index);
Click to expand...
sẽ lấy giá trị của toàn bộ mảng. Nhưng mình ko muốn lấy toàn bộ. Ví dụ mình tách ra thành 2 trường hợp so sánh, nếu TH1 thì lấy giá trị của mảng từ B11 đến B14, TH2 thì lấy từ B15 đến B17 thì phải sửa dòng code trên như thế nào ?
 
Thì tách cái object literal bmCheckResultArrB ở trên ra làm 2 cái thôi
var bmCheckResultArrB1 = {
B11 : 'Lún, nghiêng lệch',
B12 : 'Hư hại do va chạm',
B13 : 'Nứt'
}

var bmCheckResultArrB2 = {
B15 : 'Hỏng đá xây',
B16 : 'Giảm yếu tiết kiện kết cấu',
B17 : 'Liên kết lỏng, kém'
};

< trong doan loop>
if(TH1)
selbox.options[selbox.options.length] = new Option(bmCheckResultArrB1[index], index);
else if (Th2)
selbox.options[selbox.options.length] = new Option(bmCheckResultArrB2[index], index);
Click to expand...

Hoặc viết switch-case khi loop trong cái object literal đầu tiên, cái đấy thì viết dài hơn, nhưng mà tổng quát + code dễ đọc hơn.
Mà như vậy vẫn còn đầy thứ xảy ra, bạn thử nghĩ nếu các option chọn không liên tục, etc. Mình thấy bạn nên luyện thêm cơ bản của JS nói riêng hoặc programming language nói chung thì sau này linh động deal với các trường hợp khác nhau được :)
 
Chỉnh sửa cuối:
hì mình muốn để nó trong cùng 1 mảng vì số lượng option cũng khá nhiều :D. Lý thuyết thì lâu mình ko đụng vào với cả lười nên hổng nhiều lắm, h gặp chỗ nào mắc thì chỉ có lên hỏi anh gúc tìm code rồi đem về chỉnh sửa thôi :D
 
You must log in or register to reply here.
Back
Top