Get the value of the groupings of the selected dropdown jQuery
Question
I have a dropdown wherein I wanted to get the value of the groupings and set the value in the textfield whenever any change is made. However my code below is not working:
<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 answers
solution1
0 ACCPTED 2018-08-09 09:50:56
You have to read the value of select box and then find correct option matching the value. read attribute from option will give grouping value
$(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'>
solution2
0 2018-08-09 09:51:56
Firstly note that putting non-standard attributes on an HTML element is invalid, which can lead to rendering or JS problems. If you want to store custom data in an element, use a data attribute.
To read the value back out, you need to retrieve the selected option from the select first. Try this:
$(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" />
solution3
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>
Buddy your code is working fine.
Just make sure your ID for text field is correct.In your case its should be something like this
<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>
and your Jquery is working fine too
$(document).ready(function(){
$('#selectsample').change(function(){
var val = $('#selectsample').val();
$("#txt1").val(val);// this is my textfield id=txt1
});
});
solution4
0 2018-08-09 10:00:48
I think that with value you're referring to the text inside the options right?!
Here's the code:
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.