获取所选下拉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.