get value of hidden dropdown disabled selected option
Question
I have a simple dropdown list with the first option selected and disabled and two other options when I click on "Submit" and the dropdown is shown I get the value of the dropdown When the dropdown list is hidden I always get the value "null" even when I trying to set the value to a string "None" with $("#select").val("None") commmand
How can I set the value to "None" after hiding the dropdown list?
===== Code output: ====
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
$("select").hide();
$("select").val("None");
});
$(".btn2").click(function(){
$("p").show();
$("select").show();
$("#select option:first").prop("selected", true);
});
$("#btnSmbt").click(function() {
$("#select").val("None");
alert($("#select").val());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value"1">1</option>
<option value"2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
</body>
</html>
3 answers
solution1
1 2021-02-11 16:22:50
There's a couple of issues in your code. Firstly the HTML has some errors in the option elements; you're missing the = between the value attribute and the value you provide.
Secondly, in the jQuery code you're setting the value of 'None' to the select, yet no option it contains has that value. I presume you're trying to select the first option element so that should be an empty string instead: .val('') .
Lastly you alert() the value after you re-set it back to the default. This is why you always see nothing in the alert itself. Swap those lines around.
With that said, try this:
$(document).ready(function() { $(".btn1").click(function() { $("p").hide(); $("select").hide(); $("select").val(''); }); $(".btn2").click(function() { $("p").show(); $("select").show(); $("select").val(''); }); $("#btnSmbt").click(function() { alert($("#select").val()); $("#select").val(''); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <p>This is a paragraph.</p> <select id="select"> <option value="" disabled selected>Select Number</option> <option value="1">1</option> <option value="2">2</option> </select><br><br> <button class="btn1">Hide</button> <button class="btn2">Show</button><br><br> <button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
solution2
0 2021-02-11 16:23:54
"None" is not existing value in your select option, thus it'll give you null
Also you html value options misses the =
In order to get a value you have to set an existing value between those option by example 1 or 2 as your example shows see below snippet:
$(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); $("select").hide(); $("select").val("1"); }); $(".btn2").click(function(){ $("p").show(); $("select").show(); $("#select option:first").prop("selected", true); }); $("#btnSmbt").click(function() { $("#select").val(); alert($("#select").val()); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>This is a paragraph.</p> <select id="select"> <option value="" disabled selected>Select Number</option> <option value="1">1</option> <option value="2">2</option> </select> <br><br> <button class="btn1">Hide</button> <button class="btn2">Show</button> <br><br> <button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
solution3
0 2021-02-11 16:27:01
In addition to the other answers, note that disabled controls do not have values.
So your first option, which is disabled, will always give the value null regardless of its actual value
See the snippet for a demonstration of two select , one with disabled entry.
console.log($("#select1").val()) console.log($("#select2").val())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select1"> <option value="anyvalue" disabled selected>Select Number</option> </select> <select id="select2"> <option value="anyvalue" selected>Select Number</option> </select>
The actual issue in your code is likely (as pointed out in other answers) due to clearing it before displaying it. But for future reference if anyone tries to get a values of a disabled option , this would be the cause of it giving null .
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.