已选择 Jquery HTML <option> 的方法

Question

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

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

或select:

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

ps: 假设我有 3 个选项和 3 个 div 要淡出。我如何 select 我的 3 个选项中的任何一个 div？像这样：

<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 一个淡出，对于选项 y div 两个和选项 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);
});

对于更新的新问题 使用 id 作为数据属性或 html

中的公共 class

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

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

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

已选择 Jquery HTML <option> 的方法

Jquery method for HTML <option> selected

html

javascript

jquery

drop-down-menu