獲取所選下拉jQuery分組的值
[英]Get the value of the groupings of the selected dropdown jQuery
問題描述
我有一個下拉菜單，我想獲取分組的值，並在進行任何更改時在文本字段中設置值。 但是我下面的代碼不起作用：
<select id="selectsample" name="samp"> <option value="1" grouping="valueiwant">first</option> <option value="2" grouping="valueiwantsecond">four</option> </select> <script type="text/javascript"> $(document).ready(function() { $('#selectsample').change(function() { var val = $('#selectsample').val(); $("#txt1").val(val); // this is my textfield id=txt1 }); }); </script>
4 個解決方案
解決方案1
0 已采納 2018-08-09 09:50:56
您必須閱讀選擇框的值，然后找到與該值匹配的正確選項。 從選項讀取屬性將給出分組值
$(document).ready(function(){ $('#selectsample').change(function(){ var val = $(this).val(); // replace $(this) which refer to select box for which change event occurred //var $option= $(this).find('option:selected'); -- you can use this option too var $option= $(this).find('option[value=' + val + ']'); $("#txt1").val($option.attr('grouping'));// this is my textfield id=txt1 }).change(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectsample" name="samp"> <option value="1" grouping="valueiwant" >first</option> <option value="2" grouping="valueiwantsecond" >four</option> </select> <input type='text' id='txt1'>
解決方案2
0 2018-08-09 09:51:56
首先請注意，將非標准屬性放在HTML元素上是無效的，這可能導致呈現或JS問題。 如果要將自定義數據存儲在元素中，請使用data屬性。
要回讀該值，您需要先從select檢索所選的option 。 嘗試這個：
$(document).ready(function() { $('#selectsample').change(function() { var $select = $(this); var val = $select.val(); var grouping = $select.find('option:selected').data('grouping'); $('#value').val(val); $('#grouping').val(grouping); }).change(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selectsample" name="samp"> <option value="1" data-grouping="value-i-want">first</option> <option value="2" data-grouping="value-i-want-second">four</option> </select> <input type="text" id="value" /> <input type="text" id="grouping" />
解決方案3
0 2018-08-09 09:53:25
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <select id="selectsample" name="samp"> <option value="1" grouping="valueiwant">first</option> <option value="2" grouping="valueiwantsecond">four</option> </select> <input type="text" id="txt1" value="" /> </div> <script> $(document).ready(function () { $('#selectsample').change(function () { var val = $('#selectsample').val(); $("#txt1").val(val); // this is my textfield id=txt1 }); }); </script> </body> </html>
伙計，您的代碼運行良好。
只需確保您的文本字段ID是正確的即可。
<input type="text" id="txt1" value=""/>
<select id="selectsample" name="samp">
<option value="1" grouping="valueiwant" >first</option>
<option value="2" grouping="valueiwantsecond" >four</option>
</select>
而且你的jQuery也很好
$(document).ready(function(){
$('#selectsample').change(function(){
var val = $('#selectsample').val();
$("#txt1").val(val);// this is my textfield id=txt1
});
});
解決方案4
0 2018-08-09 10:00:48
我認為您指的是選項內的文本，對嗎？
這是代碼：
jQuery(document).ready(function() { jQuery('#selectsample').change(function() { var val = jQuery('#selectsample option:selected').text(); jQuery("#txt1").val(val); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectsample" name="samp"> <option value="1" grouping="valueiwant">first</option> <option value="2" grouping="valueiwantsecond">four</option> </select> <input type="text" id="txt1">
如何在jQuery中獲取下拉列表的選定值的順序？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.