0

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

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>

JS

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

3 回答 3

0

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

$('select').on('change', function(){
var idString = $(this).find("option:selected").attr('data-pick');
$('#yup').text(idString);
});
于 2013-08-19T06:57:09.000 回答
0

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

工作演示

于 2013-08-19T06:58:04.473 回答
0

几个提示：

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

正确的解决方案应该是监听changeon <select>，并找到对应的DOM 元素的<option>使用。下面的例子：selectedIndex<select>

$('select').on('change', function(){
    var idString = this.options[this.selectedIndex].getAttribute('data-pick');
    $('#yup').text(idString);
});
于 2013-08-19T07:14:33.613 回答