JQuery:如何获取选择器中选择的内容

时间:2013-11-15 10:35:33

标签: javascript jquery html select jquery-selectors

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

我在这里举了一个例子:

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

如何抓住选择器中选择的选项? 接下来我如何显示或不显示复选框字段集?

非常感谢!

7 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

尝试:

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

要获取该选项的文字,请使用text()

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

更多信息:

答案 2 :(得分:1)

首先,您不应该在页面上有重复的ID。

另外,我建议您为所有复选框添加唯一的输入名称,并始终从单个表单提交所有这些名称(并且您将忽略那些您不需要的名称)。您可以通过多种方式实现所需的功能,其中一种方法是隐藏两个字段集并将监听器设置为select元素 - 您可以使用onchange事件,并检查选择哪一个并根据该显示相应的字段集。 / p>

检查提交的数据时,首先检查选择值,然后选中相应的复选框。

答案 3 :(得分:1)

你必须使用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

答案 4 :(得分:1)

你可以用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

答案 5 :(得分:0)

您好,您可以使用$(“#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

答案 6 :(得分:0)

我已在您的选项集中添加了唯一的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();
    }
  });
});