select 태그에 특정 옵션 만 표시하는 방법은 무엇입니까?

select 태그의 값에 따라 특정 옵션 만 표시하려면 어떻게합니까?select 태그에 특정 옵션 만 표시하는 방법은 무엇입니까?

function key(id){ 
    var selectValue = document.getElementById('names').value 
     = document.carmakes.cars.selectedIndex 
     var selectOption = $("#names option:selected").val(); 
} 

<select size='5' name='carmakes' onchange='key(id)'> 
    <option selected='selected' value="-1">Car makes</option> 
    <option>BMW</option> 
    <option>Audi</option> 
</select> 

<select required='required' size='5' type='text' id='names'> 
<option selected="selected" value="0" >Car names</option> 
<option value="1">X5</option> 
<option value="2">Q5</option>

출처

2014-11-19 Tom

이 옵션을 선택하는있는 선택 따라 선택해야 하는가? –

조금 더 설명 할 수 있습니까? – codebot

예를 들어, 'carmakes'에서 _BMW_를 선택한 다음'names'에 _X5_ 만 표시하면됩니까? _Audi_를 선택하면 _Q5_ 만 표시합니까? – Rhumborl

확인이 : http://www.sanwebe.com/2013/05/select-box-change-dependent-options-dynamically

<!DOCTYPE html> 
<html> 
<head> 
<meta charset='UTF-8' /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 

//let's create arrays 
var chocolates = [ 
    {display: "Dark chocolate", value: "dark-chocolate" }, 
    {display: "Milk chocolate", value: "milk-chocolate" }, 
    {display: "White chocolate", value: "white-chocolate" }, 
    {display: "Gianduja chocolate", value: "gianduja-chocolate" }]; 

var vegetables = [ 
    {display: "Broccoli", value: "broccoli" }, 
    {display: "Cabbage", value: "cabbage" }, 
    {display: "Carrot", value: "carrot" }, 
    {display: "Cauliflower", value: "cauliflower" }]; 

var icecreams = [ 
    {display: "Frozen yogurt", value: "frozen-yogurt" }, 
    {display: "Booza", value: "booza" }, 
    {display: "Frozen yogurt", value: "frozen-yogurt" }, 
    {display: "Ice milk", value: "ice-milk" }]; 

//If parent option is changed 
$("#parent_selection").change(function() { 
     var parent = $(this).val(); //get option value from parent 

     switch(parent){ //using switch compare selected option and populate child 
       case 'chocolates': 
       list(chocolates); 
       break; 
       case 'vegetables': 
       list(vegetables); 
       break;    
       case 'icecreams': 
       list(icecreams); 
       break; 
      default: //default child option is blank 
       $("#child_selection").html(''); 
       break; 
      } 
}); 

//function to populate child select box 
function list(array_list) 
{ 
    $("#child_selection").html(""); //reset child options 
    $(array_list).each(function (i) { //populate child options 
     $("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>"); 
    }); 
} 

}); 
</script> 

</head> 
<body> 
<div class="wrapper"> 
Category : <select name="parent_selection" id="parent_selection"> 
    <option value="">-- Please Select --</option> 
    <option value="chocolates">Chocolates</option> 
    <option value="vegetables">Vegetables</option> 
    <option value="icecreams">Ice cream</option> 
</select> 
<select name="child_selection" id="child_selection"> 
</select> 
</div> 
</body> 
</html>

나이 :

출처

2014-11-19 11:32:09 jonayreyes

가 동작하는 예제 http://simpleweb.github.io/jquery-dependent-selects/을 : http://jsfiddle.net/20omnz2c/

$('#carmakes').on('change', function() { 
    var selected = $(this).val().toLowerCase(); 
    if (selected != '0') { 
     $('#names').show(); 
     $('#names option').hide(); //hide all options initially 
     $('#names option:eq(0)').show(); //show the first option 
     $('#names option.' + selected).show(); //show options with the right class   
    } else { 
     $('#names').hide();  
     $('#names option').hide();   
    } 
});

출처

2014-11-19 11:48:41

select 태그에 특정 옵션 만 표시하는 방법은 무엇입니까?

답변

관련 문제