javascript - 用于选择 HTML 的 Jquery 方法

Question

在 Jquery 中选择这些选项的正确方法是什么？

<select>
  <option id="x" >A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>

<div id="one"></div>

这不起作用:

$("#x").click(function(){
    $("#one").fadeOut(1000);
});

或选择:

$("#x").select(function(){
    $("#one").fadeOut(1000);
});

PS:想象一下我有 3 个选项和 3 个要淡出的 div。如何为特定 div 选择 3 个选项中的任意一个？像这样:

<select>
<option id="x" >A</option>
<option id="y">B</option>
<option id="z">C</option>
</select>

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

对于选项 x，我只希望 div 1 淡出，对于选项 y div 2，对于选项 z div 3

Answer 1

像这样改变html，你必须在选择元素中使用id

HTML

<select id="x">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>

JS

$("#x").change(function(){
    $("#one").fadeOut(1000);
});

或者如果你把 id 放在选项中这样做

$("#x").parent().change(function() {
    $("#one").fadeOut(1000);
});

对于更新的新问题使用 id 作为数据属性或 html 中的公共(public)类

HTML

<select>
    <option id="x">A</option>
    <option id="y">B</option>
    <option id="z">C</option>
</select>
<div id="one" data-id="x">x</div>
<div id="two" data-id="y">y</div>
<div id="three" data-id="z">z</div>

JS

$("select").change(function () {
    var id = $(this).find("option:selected")[0].id;
    //use some commaon class or use attrbute 
    //$(".commonClass").hide();
    $("[data-id]").hide()
    $("[data-id=" + id + "]").show();

}).change();

<强> DEMO