使用自定义属性jQuery选择器与下拉列表选择

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

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

来源

2013-08-19 Potatrick

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

来源

2013-08-19 06:58:04

谢谢先生，那很快。 – Potatrick

欢迎:) –

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

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

来源

2013-08-19 06:57:09 rps

几个小窍门：

的change事件仅发生在<select>，你不能抓住它<option>。
keyup事件的字面意思是键盘的键，这可能不是你想要的。

妥善解决应该是<select>监听change，并找到利用selectedIndex<select> DOM元素的相应<option>。示例如下：

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

来源

2013-08-19 07:14:33 rhgb

如何防止空div显示“null”这种方法？ – Potatrick

只需对结果进行一些测试：if（idString）{$（'＃yup'）。text（idString）; }' – rhgb

使用自定义属性jQuery选择器与下拉列表选择

回答

相关问题