JQuery：如何抓取选择器中选择的内容

Posted 2023-03-05

【中文标题】JQuery：如何抓取选择器中选择的内容

【英文标题】：JQuery: How to grab what it is selected in the selector

【发布时间】：2013-11-28 17:24:26

【问题描述】：

我有一个带有两个选项的选择框。 根据我需要显示一组不同的复选框的选项。 根据用户在选择中选择的内容，我将显示一组复选框或其他复选框。

这里我做了一个例子：

http://jsbin.com/acOXisI/20/edit

如何获取选择器中选择的选项？ 随后我如何显示或不显示复选框字段集？

非常感谢！

【问题讨论】：

请注意：如果输入在标签内，则标签不需要for= 属性:)

谢谢大家的回复！有这么多好的回复，所有的工作！太可惜了，我只能选择一个作为正确的。无论如何，堆栈溢出摇滚！

【参考方案1】：

你需要的javascript是：

// hide the fieldsets on page load
$(".otion1, .otion2").hide();



$("select").change(function() 
  var $this = $(this);

  if($this.val() === "1") 
    $(".otion1").show();
    $(".otion2").hide();
   else if($this.val() === "2") 
    $(".otion1").hide();
    $(".otion2").show();
   else 
    $(".otion1, .otion2").hide();
  

);


// prevent hidden checkboxes from being submitted
$("form").submit(function() 
  $(this).find("input[type='checkbox']").filter(":hidden").each(function() 
    this.checked = false;
  );
);

并为您的选择选项添加一些值：

<option value="1">Option 1</option>
<option value="2">Option 2</option>

查看编辑后的演示：http://jsbin.com/acOXisI/23/edit

【讨论】：

另请注意，您将 'option' 拼写为 'otion' - 可能会导致一些拼写错误/错误...

感谢指出并感谢您的回答。这正是我所需要的！

很好的解决方案，但注意隐藏的值仍然会被提交。

好点。 jsbin.com/acOXisI/23/edit 的 JS 添加解决了这个问题。答案已更新。

【参考方案2】：

试试：

jQuery("#selector option:selected").val();

或者要获取选项的文本，使用text():

jQuery("#selector option:selected").text();

更多信息：

http://api.jquery.com/val/ http://api.jquery.com/text/

【参考方案3】：

首先，页面上不应有重复的 ID。

另外，我建议您为所有复选框设置唯一的输入名称，并始终从一个表单提交所有复选框（并且您会忽略不需要的那些）。您想要的功能可以通过多种方式实现，其中之一是隐藏两个字段集并为 select 元素设置侦听器 - 您可以使用 onchange 事件，并检查选择了哪一个，并据此显示适当的字段集。

当你检查提交的数据时，首先检查选择值，然后只检查相应的复选框。

【讨论】：

你是对的。与身份证混淆。我已经更改了它们并编辑了问题。现在应该好多了。

那太好了，很高兴我能在不给你一行代码的情况下提供帮助。 :)

【参考方案4】：

你必须使用 jQuery：

$().ready(function()
  $('#selector').change(function()
    value=$(this).find(":selected").text();
    console.log(value)
    if (value == 'Option 1')
       $('.otion1').show()
       $('.otion2').hide()
    
    else
       $('.otion1').hide()
       $('.otion2').show()
    
  )
)

您的 bin 已被克隆并正常工作：

http://jsbin.com/UcaWUCA/1/edit

【参考方案5】：

你可以用 jQuery 做到这一点。请注意，隐藏字段仍将被提交，因此它们也需要禁用：

$(function()
  $("#selector").on("change", function()
      $(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
      $("."+$(this).val()).show().find("input").removeAttr("disabled");
  );
  $("#selector").trigger("change");//run on load      
);

http://jsbin.com/aVihIJOr/1/edit

【讨论】：

你的观点很好。我想我不需要，因为我不需要提交表格。我需要在 Google 地图中显示该框。将有不同的选项/路径，复选框/组将对应于要显示的不同标记组。所以认为我不必担心提交值，对吧？无论如何，谢谢你指出这一点！

【参考方案6】：

您好，您可以使用 $("#selector").val() 来获取选定的选项。

$("#selector").change(function()

 option = $(this).val();

 if(option == 1)

   $(".option1").show();
   $(".option2").hide();

  else if(option == 2) 

  $(".option2").show();
  $(".option1").hide();

  else 

  $(".option2").hide();
  $(".option1").hide();

 

);

工作示例： http://jsbin.com/acOXisI/10/edit?html,js,output

【参考方案7】：

我已将唯一的 Div Id 添加到您的选项集中，然后将它们与确切的选定值相关联。

示例： http://jsbin.com/acOXisI/18/edit

$(document).ready(function()
  $('#selector').change(function()
    value=$(this).find(":selected").val();
    if (value == 'option1')
       $('#option1').show();
       $('#option2').hide();
    
    else if(value == 'option2')
      $('#option1').hide();
       $('#option2').show();
    else
      $('#option1').show();
       $('#option2').show();
    
  );
);