1

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

我在这里做了一个例子：

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

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

非常感谢你！

4

7 回答 7

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

于 2013-11-15T10:41:22.053 回答
1

尝试：

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

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

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

更多信息：

于 2013-11-15T10:41:31.380 回答
1

首先，您不应该在页面上有重复的 id。

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

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

于 2013-11-15T10:41:52.620 回答
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

于 2013-11-15T10:44:53.560 回答
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

于 2013-11-15T10:54:53.690 回答
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

于 2013-11-15T10:48:32.103 回答
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();
    }
  });
});
于 2013-11-15T10:52:47.413 回答