3

次の 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>

ここにコードを書きました。

4

4 に答える 4

3

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/

于 2013-01-25T08:35:06.203 に答える
1

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');
}
});
于 2013-01-25T08:28:57.833 に答える
1

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>

そしてフィドラーへのリンク

于 2013-01-25T08:21:27.417 に答える