Cách thay đổi các tùy chọn của một lựa chọn bằng cách sử dụng JavaScript

Question

Tôi có một trang HTML, trong đó tôi có 2 select s.

<select id="field" name="field" onchange="checkValidOption();"> 
    <option /> 
    <option value="Plugin ID">Plugin ID</option> 
    <option value="Name">Name</option> 
</select> 
<select id="operator" name="operator" onchange="checkValidOption();"> 
    <option /> 
    <option value="EQUALS">EQUALS</option> 
    <option value="CONTAINS">CONTAINS</option> 
    <option value="NOT CONTAINS">NOT CONTAINS</option> 
    <option value="REGEX">REGEX</option> 
</select> 

Những gì tôi muốn xảy ra là checkValidOption() có thể làm cho nó để nếu "Plugin ID" được chọn trong lĩnh vực đó lựa chọn duy nhất là tương đương (và nó được chọn) và nếu không tất cả các tùy chọn khác có sẵn . Bất kỳ ý tưởng về cách tiếp cận này?

tôi đã cố gắng thay đổi innerHTML của người điều khiển chọn trong JS:

document.getElementById("operator").innerHTML = 
    "<option value='EQUALS'>EQUALS</option>"; 

Tuy nhiên kết quả này trong một sản phẩm nào select (điều này cũng sẽ bao gồm tự thiết lập nhiều option s cho sẽ trở lại có tất cả những người được liệt kê ở trên).

Tôi không thể nghĩ ra giải pháp khác, mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Hãy thử điều này:

Demo here

var field = document.getElementById('field'); 
var operator = document.getElementById('operator'); 
field.onchange = function() { fieldcheck(); } 
operator.onchange = function() { fieldcheck(); } 
fieldcheck(); 

function fieldcheck() { 
    if (field.value == 'Plugin ID') { 
     for (i = 0; i < operator.options.length; ++i) { 
      if (operator.options[i].value != 'EQUALS') { 
       operator.options[i].disabled = true; 
      } 
     }; 
     operator.value = 'EQUALS'; 
    } else { 
     for (i = 0; i < operator.options.length; ++i) { 
      operator.options[i].disabled = false; 
     }; 
    } 
} 

Answer 2

Trường chọn không sử dụng phương pháp innerHTML, bạn cần sử dụng giá trị.

document.getElementById("operator").value = "..."; 

Answer 3

Để thao tác tùy chọn khi Plugin ID được chọn:

function checkValidOption(){ 
    var x=document.getElementById("field"); 
    var y=document.getElementById("operator"); 
    if (x.options[1].selected === true){ 
     document.getElementById("operator").options[1].selected = true; 
     for(var i=0; i<y.length; i++){ 
      if (i !== 1){ 
       //disabling the other options 
       document.getElementById("operator").options[i].disabled = true;  
      } 
     } 
    }  
    else{ 
     for(var i=0; i<y.length; i++){ 
      //enabling the other options 
      document.getElementById("operator").options[i].disabled = false;  
     } 
    } 
} 

Dưới đây là một link to fiddle

Answer 4

heres một giải pháp jquery.

mỗi khi lựa chọn đầu tiên thay đổi, nó sẽ tạo ra các tùy chọn mới từ một mảng cho lựa chọn thứ 2. Vấn đề ở đây là tôi đã phải thay đổi các giá trị tùy chọn đầu tiên chọn 0 và 1 để chọn giá trị trong mảng, bạn có thể thao tác những sau này nếu bạn đang lưu trữ thông tin này ở đâu đó

http://jsfiddle.net/2TZJh/

$(document).ready(function() { 

    $("#field").change(function() { 
     var val = $(this).val(); 
     $("#operator").html(options[val]); 
    }); 
     var options = [ 

     '<option value="EQUALS">EQUALS</option>', 
     '<option></option><option value="EQUALS">EQUALS</option><option value="CONTAINS">CONTAINS</option> <option value="NOT CONTAINS">NOT CONTAINS</option>  <option value="REGEX">REGEX</option>' 

    ]; 

    });