Как изменить выпадающие значения на основе выбора другого раскрывающегося списка с использованием jquery

У меня есть первое раскрывающееся меню с двумя вариантами: Стандартное стекло и закаленное стекло. У меня есть другое раскрывающееся меню, где пользователь может выбрать ширину стекла.Как изменить выпадающие значения на основе выбора другого раскрывающегося списка с использованием jquery

Моя проблема: во втором раскрывающемся списке необходимо изменить значения выпадающего списка в зависимости от того, какое стекло было выбрано.

Посмотрите на мой код, у меня есть два выпадающих списка с идентификатором glassWidthStandard и другим выпадающим стекломWidthTempered.

Спасибо :) Вот мой код:

<select id="typeOfGlass"> 
    <option value="15">Standard/Annealed Glass Width</option> 
    <option value="20">Tempered Glass Width</option> 
</select><br> 


Glass Width for Standard:<br> 
    <select id="glassWidthStandard"> 
     <option value="19">19</option> 
     <option value="20">20</option> 
     <option value="21">21</option> 
    </select> 

Glass Width for Tempered:<br> 
    <select id="glassWidthTempered"> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
    </select>

источник

2015-06-05 ilovedoingwebsites

но где ваш код 'jquery'? что вы пробовали? Рассмотрим добавление jsfiddle. –

То, что вы хотите достичь, не является чистым. Как я вижу, есть три раскрывающихся списка. – divy3993

Я не знаю, с чего начать, я нашел это: [link] (http://jsfiddle.net/sabithpocker/fRuhn/), но параметр для фильтрации - это параметры, у меня не могут быть одинаковые значения для групп для второго падать. – ilovedoingwebsites

я предложил бы иметь только два выбирает, то изменение 2-го выбора на основе того, что выбрано в первом.

$('#typeOfGlass').on('change', function(){ 
    $('#glassWidth').html(''); 
    if($('#typeOfGlass').val()==15){ 
     $('#glassWidth').append('<option value="19">19</option>'); 
     $('#glassWidth').append('<option value="20">20</option>'); 
     $('#glassWidth').append('<option value="21">21</option>'); 
    }else{ 
     $('#glassWidth').append('<option value="6">6</option>'); 
     $('#glassWidth').append('<option value="7">7</option>'); 
     $('#glassWidth').append('<option value="8">8</option>'); 
     $('#glassWidth').append('<option value="9">9</option>'); 
    } 
});

Вот рабочий пример: https://jsfiddle.net/6hmpa1ax/

источник

2015-06-05 16:49:36 depperm

Почему голос? Он дал законный ответ ... – wrxsti

В качестве альтернативы, если вы не хотите, чтобы динамически изменить DOM вы можете скрыть/показать Premade разметку. DEMO

HTML

<select id="typeOfGlass"> 
    <option selected disabled>Please select a glass type</option> 
    <option value="15">Standard/Annealed Glass Width</option> 
    <option value="20">Tempered Glass Width</option> 
</select> 
<br /> 

<div class="standard"> 
    <label>Glass Width for Standard:</label> 
    <select id="glassWidthStandard"> 
     <option value="19">19</option> 
     <option value="20">20</option> 
     <option value="21">21</option> 
    </select> 
</div> 
<div class="tempered"> 
    <label>Glass Width for Tempered:</label> 
    <select id="glassWidthTempered"> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
    </select> 
</div>

JQuery

$('#typeOfGlass').on('change', function(){ 
    if($(this).val() == 15){ 
     $('.tempered').hide(); 
     $('.standard').show(); 
    } else if($(this).val() == 20){ 
     $('.standard').hide(); 
     $('.tempered').show(); 
    } 
});

CSS

.standard, .tempered { 
    display:none; 
}

источник

2015-06-05 16:52:42 wrxsti

есть смотреть t этот код

<body onLoad="fun('')"> 

<select id="typeOfGlass" onchange="fun(this.value)" > 
<option value=''>select</option> 
    <option value="15">Standard/Annealed Glass Width</option> 
    <option value="20">Tempered Glass Width</option> 
</select><br/><br/> 


    <select id="glassWidthStandard"> 
     <option value="19">19</option> 
     <option value="20">20</option> 
     <option value="21">21</option> 
    </select> 
    <select id="glassWidthTempered"> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
    </select> 


</body> 
<script> 
function fun(val) 
{ 
    if(val==15) 
    { 
    $('#glassWidthTempered').hide(); 
    $('#glassWidthStandard').show(); 
    } 
    else if(val==20) 
    { 
    $('#glassWidthStandard').hide(); 
    $('#glassWidthTempered').show(); 
    } 
    else if(val=='') 
    { 
    $('#glassWidthStandard').hide(); 
    $('#glassWidthTempered').hide(); 
    } 
} 
</script>

источник

2015-06-05 17:05:43 shreyansh

Как изменить выпадающие значения на основе выбора другого раскрывающегося списка с использованием jquery

ответ

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