使用自定義屬性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選擇器與下拉列表選擇

回答

相關問題