获取隐藏下拉列表禁用选定选项的值
[英]get value of hidden dropdown disabled selected option
问题描述
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
我有一个简单的下拉列表，当我单击“提交”并显示下拉列表时，第一个选项被选中并禁用以及其他两个选项我得到下拉列表的值当下拉列表被隐藏时，我总是得到值“null”即使我尝试使用 $("#select").val("None") 命令将值设置为字符串“None”
How can I set the value to "None" after hiding the dropdown list?隐藏下拉列表后如何将值设置为“无”？
===== Code output: ==== ===== 代码 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 个解决方案
解决方案1
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;首先 HTML 在option元素中有一些错误； you're missing the = between the value attribute and the value you provide.您缺少value属性和您提供的值之间的= 。
Secondly, in the jQuery code you're setting the value of 'None' to the select, yet no option it contains has that value.其次，在 jQuery 代码中，您将'None'的值设置为 select，但它包含的任何选项都没有该值。 I presume you're trying to select the first option element so that should be an empty string instead: .val('') .我想你正在尝试 select 第一个option元素，所以它应该是一个空字符串： .val('') 。
Lastly you alert() the value after you re-set it back to the default.最后，在将其重新设置为默认值后，您可以alert()值。 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>
解决方案2
0 2021-02-11 16:23:54
"None" is not existing value in your select option, thus it'll give you null “无”不是您的 select 选项中的现有值，因此它会给您 null
Also you html value options misses the =还有你 html 值选项错过了=
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:为了获得一个值，您必须通过示例1或2在这些选项之间设置一个现有值，如您的示例所示，请参见下面的代码段：
$(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>
解决方案3
0 2021-02-11 16:27:01
In addition to the other answers, note that disabled controls do not have values.除了其他答案，请注意disabled的控件没有值。
So your first option, which is disabled, will always give the value null regardless of its actual value因此，您的第一个选项（已禁用）将始终给出值null而不管其实际值如何
See the snippet for a demonstration of two select , one with disabled entry.有关两个select的演示，请参阅片段，其中一个具有禁用条目。
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 .但是，如果有人试图获取禁用option的值，以供将来参考，这将是它给出null的原因。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.