2012-03-29 27 views
7

Tôi có một DropDownList mà yêu cầu người dùng nếu ông muốn tham gia câu lạc bộ:onChange và onSelect trong DropDownList

Do you want to join the club 
Yes 
No 

Theo danh sách này có một danh sách đó được thiết lập để người khuyết tật như một mặc định. Danh sách này có các phòng ban của câu lạc bộ. Danh sách này sẽ không được kích hoạt cho đến khi người dùng chọn Có.

Tôi đã xây dựng mã sau nhưng vấn đề mà tôi không thể giải quyết là giả sử người dùng chọn Có, sau đó anh ấy thay đổi quyết định của mình để anh ấy sẽ chọn Không một lần nữa. Trong trường hợp này danh sách các phòng ban vẫn được kích hoạt. Tôi muốn nó bị vô hiệu hóa khi anh ta chọn Không một lần nữa.

<html> 
    <head> 
     <script type="text/javascript"> 
      function disable() 
      { 
       document.getElementById("mySelect1").disabled=true; 
      } 
      function enable() 
      { 
       document.getElementById("mySelect1").disabled=false; 
      } 
     </script> 
    </head> 
    <body> 
     <form> 
      <select id="mySelect" onChange="enable();"> 
       <option onSelect="disable();">No</option> 
       <option onSelect="enable();">Yes</option> 
      </select> 
      <select id="mySelect1" disabled="disabled" > 
       <option>Dep1</option> 
       <option>Dep2</option> 
       <option>Dep3</option> 
       <option>Dep4</option> 
      </select> 
     </form> 
    </body> 
</html> 

Tôi nghĩ rằng onSelect="disable();" sẽ giải quyết được sự cố nhưng vẫn không hoạt động.

Cảm ơn

+0

Có vẻ như các nút radio sẽ phù hợp hơn nhiều. Ngoài ra, 'onselect' không phải là một thuộc tính hợp lệ cho các phần tử select và option. – RobG

Trả lời

14

Tôi sẽ làm như thế này jsFiddle example.

JavaScript:

function check(elem) { 
    document.getElementById('mySelect1').disabled = !elem.selectedIndex; 
} 

HTML:

<form> 
<select id="mySelect" onChange="check(this);"> 
<option>No</option> 
<option>Yes</option> 
</select> 

<select id="mySelect1" disabled="disabled" > 
<option>Dep1</option> 
<option>Dep2</option> 
<option>Dep3</option> 
<option>Dep4</option> 
</select> 
</form> 
3

Tôi đặt cược onchange là bị sa thải sau khi onselect, về cơ bản cho phép lại chọn.

Tôi khuyên bạn nên triển khai chỉ số onchange, kiểm tra tùy chọn nào đã được chọn và bật hoặc tắt dựa trên điều đó.

Để có được giá trị của việc sử dụng tùy chọn chọn:

document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value 

nào sẽ mang lại .. không có gì vì bạn chưa xác định giá trị cho mỗi tùy chọn .. :(

<select id="mySelect" onChange="enable();"> 
<option onSelect="disable();" value="no">No</option> 
<option onSelect="enable();" value="yes">Yes</option> 
</select> 

Bây giờ nó sẽ mang lại "yes" hoặc "no"

3

Để thực hiện một hình thức mạnh mẽ, có nó tải trong một nhà nước và sử dụng kịch bản rất hữu ích để tăng cường hành vi của nó. Trong phần sau, lựa chọn đã được thay thế bằng các nút radio (làm cho cuộc sống dễ dàng hơn nhiều cho người dùng).

Tùy chọn "có" được chọn theo mặc định và chọn được bật. Nếu người dùng kiểm tra nút radio, lựa chọn được bật hoặc tắt tương ứng.

<form onclick="this.mySelect1.disabled = this.becomeMember[1].checked;" ... > 
    <input type="radio" name="becomeMember" checked>Yes<br> 
    <input type="radio" name="becomeMember">No<br> 

    <select id="mySelect1"> 
    <option>Dep1 
    <option>Dep2 
    <option>Dep3 
    <option>Dep4 
    </select> 
    ... 
</form> 
0

hmm.tại sao bạn không sử dụng onClick()

<select id="mySelect" onChange="enable();"> 
    <option onClick="disable();">No</option> 
    <option onClick="enable();">Yes</option> 
</select> 
2

Đơn giản chỉ cần & dễ dàng: mã JavaScript:

function JoinedOrNot(){ 
    var cat = document.getElementById("mySelect"); 
    if(cat.value == "yes"){ 
     document.getElementById("mySelect1").disabled = false; 
    }else{ 
     document.getElementById("mySelect1").disabled = true; 
    } 
} 

chỉ cần thêm vào dòng này [onChange = "JoinedOrNot()"]: <select id="mySelect" onchange="JoinedOrNot()">

nó làm việc tốt;)