获取隐藏下拉列表禁用选定选项的值答案

【问题标题】：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” - 您想用“无”选择哪一个？

标签： html jquery dropdown

【解决方案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 的原因。

【讨论】：