Question

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

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>

JS

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

Answer 1

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

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

Answer 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

Answer 3

一些提示：

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

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

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

使用自定义属性jQuery选择器和下拉选择

3 个答案: