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>

我写了代码here。

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>

link to fiddler

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

这是一个jQuery版本DEMO
当select是audi时我删除了该选项 - 它是根据值删除的，所以你可以在你想要的选项周围删除

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>');
        });
    });
});

如何使用javascript取消激活select-option？

4 个答案: