выберите второй или третий раскрывающийся список при первом раскрывающемся списке

<select name="first" id="select1"> 
    <option value="1">Item 1</option> 
    <option value="2">Item 2</option> 
</select> 
<select name="second" id="snack"> 
    <option value="1">snack 1</option> 
    <option value="2">snack 2 second</option> 
    <option value="3">snack 3 second</option> 
</select> 
<select name="third" id="drink"> 
    <option value="1">drink 1</option> 
    <option value="2">drink 2</option> 
    <option value="3">drink 3 third</option> 
</select>

Я хочу изменить второе или третье выпадающее меню в первом выпадающем меню 1-го и 2-го вариантов. т. Е. Когда мы выбираем пункт 1, выпадающее меню должно появиться, и когда мы выберем пункт 2, выпадающее меню должно быть вверх.выберите второй или третий раскрывающийся список при первом раскрывающемся списке

Я пробовал много вещей, но не смог его достичь. Я ищу решение JavaScript

источник

2015-09-14 Sushant

вы можете поделиться тем, что вы уже пробовали до сих пор? – Sushil

можете ли вы опубликовать часть кода, который вы пробовали? –

Это решение Javascript:

HTML

<select name="first" id="select1" onchange="changeTime(this);"> 
    <option value="1">Item 1</option> 
    <option value="2">Item 2</option> 
</select> 
<select name="second" id="snack" style="display:none;"> 
    <option value="1">snack 1</option> 
    <option value="2">snack 2 second</option> 
    <option value="3">snack 3 second</option> 
</select> 
<select name="third" id="drink" style="display:none;"> 
    <option value="1">drink 1</option> 
    <option value="2">drink 2</option> 
    <option value="3">drink 3 third</option> 
</select>

Javascript:

function changeTime (obj) 
{ 
    if(obj.value == 1) { 
    document.getElementById('snack').style.display='block'; 
    document.getElementById('drink').style.display='none'; 
    } 
    else{ 
    document.getElementById('drink').style.display='block'; 
    document.getElementById('snack').style.display='none'; 
    } 
}

источник

2015-09-14 17:37:01

Большое вам спасибо за помощь. это работало точно так, как я хочу :) – Sushant

Попробуйте

$('#drink').hide(); 

$('#select1').on('change', function() { 
    if($('#select1').val() == 1) { 
     $('#snack').show(); 
     $('#drink').hide(); 
    } else { 
     $('#snack').hide(); 
     $('#drink').show(); 
    } 
});

jsfiddle здесь: http://jsfiddle.net/ewwAX/604/

источник

2015-09-14 17:16:59

Yup Получил решение, и это тоже правильно. Большое вам спасибо за помощь :) – Sushant

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 

     $("#snack").css({"display":"none"});   //using css function make snak & drink are hidden 
     $("#drink").css({"display":"none"});   //use display property so that no effect on the layout .. no space taken by the hidden item 
     $("#select1").change(function(){    // on change 
     var val = $("#select1").val();     // of the value of select 1 
     if(val == 1){         // if value = 1 
     $("#snack").css({"display":"inline"});   // display snak 
     $("#drink").css({"display":"none"});   // & hide drink 
     }else if(val == 2){        // if value = 2 
     $("#snack").css({"display":"none"});   // hide snack 
     $("#drink").css({"display":"inline"});   // display drink 
     }else {           // other wise   
     $("#snack").css({"display":"none"});   // make all hidden 
     $("#drink").css({"display":"none"}); 
     } 

     }); 
    }); 
</script> 
</head> 
<body> 

    <select name="first" id="select1"> 
     <option value="0" >Select Item</option>   <!-- this option added by me -- you can omit it if you want --> 
     <option value="1" >Item 1</option> 
     <option value="2" >Item 2</option> 
    </select> 

    <select name="second" id="snack"> 
     <option value="1">snack 1</option> 
     <option value="2">snack 2 second</option> 
     <option value="3">snack 3 second</option> 
    </select> 
    <select name="third" id="drink"> 
     <option value="1">drink 1</option> 
     <option value="2">drink 2</option> 
     <option value="3">drink 3 third</option> 
    </select> 

</body>

источник

2015-09-14 17:46:00

Попытайтесь добавить объяснение, почему это работает, чтобы сделать его более полным ответом –

Проблема решена Я использовал подход Берозы Павла. Большое вам спасибо за вашу помощь :) – Sushant

выберите второй или третий раскрывающийся список при первом раскрывающемся списке

ответ

Смежные вопросы