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为fadeout，对于选项y div为2，对于选项z div 3

Answer 1

像这样更改html，你必须在select元素中使用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);
});

或 if you place id in option喜欢这个

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

更新新问题在html中使用id作为数据属性或公共类

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

Answer 2

您需要在change上使用select事件：

$('#x').parent().on('change', function() {
// On selecting option

    $("#one").fadeOut(1000);
    // Fadeout element
});

DEMO

Answer 3

你想做这样的事吗?????? http://jsfiddle.net/elviz/2g2va6qx/

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

选择了HTML <option>的Jquery方法

3 个答案: