JQuery：如何抓住它在選擇器中被選中的內容

Question

我有一個包含兩個選項的選擇框。 取決於我需要顯示一組不同的複選框。 根據用戶選擇的內容我會顯示一組複選框或其他。

在這裏，我在這裏做一個例子：

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

我怎麼能搶在選擇器選擇的選擇嗎？ 然後我如何顯示或不顯示覆選框字段集？

非常感謝！

Answer 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

Answer 2

嘗試：

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

或獲得期權的文本，使用text()：

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

更多信息：

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

Answer 3

首先，你不應該有重複頁面上的ID。

另外，我建議你把所有複選框的唯一輸入名稱，並始終從一個單一的形式提交所有這些（你會忽略那些你不需要的）。您想要的功能可以通過多種方式實現，其中一種隱藏兩個字段集並將偵聽器設置爲select元素 - 您可以使用onchange事件，並檢查選擇哪一個，並根據該字段顯示相應的字段集。

當您檢查提交的數據時，首先檢查選擇值，然後只檢查相應的複選框。

Answer 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

Answer 5

嗨，你可以使用$（ 「＃選擇」）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

Answer 6

我加入了獨特的Div編號，以你的選擇集，然後有確切的選定值鏈接他們。

例子： 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(); 
    } 
    }); 
}); 

Answer 7

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