javascript - 如何使用 javascript 停用选择选项？

Question

在下面的 HTML 代码中，我想用 JavaScript 实现以下内容。当用户选择Audi时，他只有选择的选项application 2（application 1在这种情况下必须消失）。

<select>
    <option value="volvo">Volvo</option>
    <option value="audi">Audi</option>
</select>
<select>
    <option value="app1">application 1</option>
    <option value="app2">application 2</option>
</select>

我在这里写了代码。

Answer 1

html:

 <select>
  <option id="app1" value="volvo">Volvo</option>
  <option id="app2" value="audi">Audi</option>
  </select>
 <select>
  <option value="app1">application 1</option>
  <option value="app2">application 2</option>
</select>

js：

var selections = document.getElementsByTagName('select');
selections[0].onchange = carSelection;

function carSelection(e) {
    var first = selections[0];
    var id = first.options[first.selectedIndex].id;

    var second = selections[1];
    var  j = 0;
    while (second.options[j])  {
        second.options[j].disabled = (second.options[j].value != id );
        if (second.options[j].value == id)
            second.selectedIndex = j;
        j++;
    }    
}

http://jsfiddle.net/U4y2J/3/

Answer 2

HTML：

 <select id="1">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  </select>
 <select id="2">
  <option id="2a" value="app1">application 1</option>
  <option id="2b" value="app2">application 2</option>
</select>

Javascript：

<script type="text/javascript">
document.getElementById("1").onchange = change;
function change(){
    var s_a = document.getElementById("1");
    var car = s_a.options[s_a.selectedIndex].value;
    var s_b = document.getElementById("2");
    if(car === "audi"){
        s_b.options["2b"].disabled = true ;
        s_b.options["2a"].selected = true;
    }
    else {
        s_b.options["2b"].disabled = false ;
    }
}
</script>

并链接到提琴手

Answer 3

application 1选择时自动取消Audi选择。

http://jsfiddle.net/KQMLQ/1/

HTML

 <select id="1">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  </select>
 <select id="2">
  <option value="app1">application 1</option>
  <option value="app2">application 2</option>
</select>

jQuery

$("#1").click(function() {
if($("#1").val() === 'volvo') {
    $("#2").find('option[value="app1"]').removeAttr('disabled');
}
if($("#1").val() === 'audi') {
    $("#2").find('option[value="app1"]').attr('disabled', 'disabled').removeAttr('selected');
    $("#2").find('option[value="app2"]').removeAttr('disabled');
}
});

Answer 4

Here is a jQuery version DEMO
where I remove the option when the select is audi - it is removed based on values so you can have as many options you want surrounding the option to remove

var opts=[];
$(function() {
    $("#sel2 option").each(function(){ // save all options
        var opt = {};
        opt.value=this.value;
        opt.text=this.text;
        opts.push(opt);
    });

    $("#sel1").on("change",function() { // restore relevant options
        var sel = $("#sel2");
        sel.empty();
        var val = $(this).val();
        $.each(opts,function(i,opt) {
          if (val == "audi" && opt.value=="app2") return;
          sel.append('<option value="'+opt.value+'">'+opt.text+'</option>');
        });
    });
});