使用带有下拉选择的自定义属性 jQuery 选择器答案

【问题标题】：Using custom attribute jQuery selectors with dropdown select使用带有下拉选择的自定义属性 jQuery 选择器
【发布时间】：2013-08-20 21:41:06
【问题描述】：

我有一系列由数据库填充的级联下拉菜单。一旦选择了系列中的最后一项，我就会尝试从数据库中的一行中提取数据。我给该行一个自定义属性，但似乎无法从中获取数据。这是我想要完成的一个简单示例。

http://jsfiddle.net/WsrBX/

HTML

<body>
<div id="wrapper">
    <form>
        <div>no id</div>
        <select>
            <option>pick</option>
            <option data-pick="33">with id</option>
        </select>
        <div id="there">has an id</div>
        <div>nope</div>
    </form>
</div>
    <div id="yup"></div><!--value should appear here upon selection-->
</body>

    $('option[data-pick]').on('keyup change', function(){
    var idString = $(this).attr('option[data-pick]');
    $('#yup').text(idString);
    });

【问题讨论】：

标签： javascript jquery forms jquery-selectors

【解决方案1】：

http://jsfiddle.net/WsrBX/1/

$('select').on('change', function(){
var idString = $(this).find("option:selected").attr('data-pick');
$('#yup').text(idString);
});

【讨论】：

【解决方案2】：

HTML：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<body>
    <div id="wrapper">
        <form>
            <div>no id</div>
            <select id="sel">
                <option>pick</option>
                <option data-pick="33">with id</option>
            </select>
            <div id="there">has an id</div>
            <div>nope</div>
        </form>
    </div>
    <div id="yup"></div>
    <!--value should appear here upon selection-->
</body>

JS：

$('#sel').on('keyup change', function () {
    var idString = $('option:selected', this).attr('data-pick');
    $('#yup').text(idString);
});

Working Demo

【讨论】：

谢谢先生，很快。

【解决方案3】：

几个提示：

change 事件仅发生在 <select> 上，您无法在 <option> 上捕获它。
keyup 事件的字面意思是键盘的按键，这可能不是您想要的。

正确的解决方案应该是在<select> 上监听change，并使用<select> DOM 元素的selectedIndex 找到对应的<option>。示例如下：

$('select').on('change', function(){
    var idString = this.options[this.selectedIndex].getAttribute('data-pick');
    $('#yup').text(idString);
});

【讨论】：

如何防止空 div 使用这种方法显示“null”？
对结果做一些测试：if (idString) { $('#yup').text(idString); }