获取隐藏下拉列表禁用选定选项的值
Posted
技术标签:
【中文标题】获取隐藏下拉列表禁用选定选项的值【英文标题】：get value of hidden dropdown disabled selected option 【发布时间】：2021-05-15 09:52:25 【问题描述】：我有一个简单的下拉列表，其中第一个选项被选中并禁用，另外两个选项 当我单击“提交”并显示下拉列表时，我得到了下拉列表的值 当下拉列表被隐藏时，即使我尝试使用 $("#select").val("None") 命令将值设置为字符串“None”，我总是得到值“null”
隐藏下拉列表后如何将值设置为“无”？
===== 代码输出：====
<!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”、“2” - 您想用“无”选择哪一个？ 【参考方案1】：您的代码中有几个问题。首先，HTML 在option 元素中有一些错误；您在value 属性和您提供的值之间缺少=。
其次，在 jQuery 代码中，您将 'None' 的值设置为选择，但它包含的任何选项都没有该值。我假设您正在尝试选择第一个 option 元素，因此它应该是一个空字符串：.val('')。
最后你alert() 值之后你将它重新设置回默认值。这就是为什么您总是在警报本身中什么也看不到的原因。交换这些线。
话虽如此，试试这个：
$(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】："None" 不是您的选择选项中的现有值，因此它会给您 null
你的 html 值选项也错过了=
为了获得一个值，您必须通过示例1 或2 在这些选项之间设置一个现有值，如您的示例所示，请参见下面的 sn-p：
$(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】：除了其他答案，请注意disabled 控件没有值。
因此，您的第一个选项（已禁用）将始终给出值 null，而不管其实际值如何
查看 sn-p 以查看两个 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>代码中的实际问题很可能（如其他答案中所指出的那样）是由于在显示之前将其清除。但如果有人试图获取禁用的option 的值以供将来参考，这将是它给出null 的原因。
【讨论】：
以上是关于获取隐藏下拉列表禁用选定选项的值的主要内容，如果未能解决你的问题，请参考以下文章
PHP如果变量等于下拉列表中的值，则将“选定”属性添加到选项