Как включить / отключить раскрывающийся список в HTML + Javascript / JQuery?

0

У меня есть два выпадающих списка пар имен IMEI и городов, как показано ниже:

<HTML>

 <body>
Select Programming font:
<select name="IMEI">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">$</option>
</select>

<select name ="city">
  <option value="jhansi">Jhansi</option>
  <option value="Delhi">Delhi</option>
  <option value="Mumbai">Mumbai</option>
  <option value="Kanpur">Kanpur</option>
</select>
</body>
</html>

Желаемое поведение: когда выбирается название города, список IMEI позволяет; в противном случае он отключен.

Как я могу это достичь?

Заранее спасибо!

  • 1
    возможный дубликат stackoverflow.com/questions/7703241/…
  • 1
    Просто чтобы указать на очевидное: в выпадающем списке вашего города уже будет выбран «Джханси». Как пользователь, я был бы очень раздражен тем, что мне пришлось выбрать другой город, чтобы включить раскрывающийся список IMEI, если бы я хотел выбрать Jhansi.
Теги:

5 ответов

2
Лучший ответ

Fiddle Demo

$(function () {
    var sel_imie = $('select[name="IMEI"]');
    sel_imei.prop('disabled', true); //disable IMEI select
    $('select[name ="city"]').change(function () {
        sel_imei.prop('disabled', false); //enable when value of city select is changed
    });
});

.изменение()

1

Попробуй это,

<select name="IMEI" disabled="disabled" id="IMEI">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">$</option>
</select>

<select name ="city" id="city">
  <option value="jhansi">Jhansi</option>
  <option value="Delhi">Delhi</option>
  <option value="Mumbai">Mumbai</option>
  <option value="Kanpur">Kanpur</option>
</select>

скрипт

$('#city').on('change',function(){

$('#IMEI').attr('disabled',false);
});

Демо: http://jsfiddle.net/khmSm/

0
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>

<select name ="city" id="city">
 <option value ="choose">Choose a city</option>
 <option value="jhansi">Jhansi</option>
 <option value="Delhi">Delhi</option>
 <option value="Mumbai">Mumbai</option>
 <option value="Kanpur">Kanpur</option>
</select>   

Вот ссылка: http://jsfiddle.net/khmSm/1/

0

попробуйте этот путь

HTML-код:

   CITY :<select name="city">
           <option value="jhansi">Jhansi</option>
           <option value="Delhi">Delhi</option>
           <option value="Mumbai">Mumbai</option>
           <option value="Kanpur">Kanpur</option>
         </select>
         <br/>

   IMEI :<select name="IMEI">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">$</option>
         </select>

КОД JQUERY:

   $('select[name=IMEI]').prop('disabled',true);
   $('select[name=city]').on('change',function () {
        $('select[name=IMEI]').prop('disabled',false);
   });

LIVE DEMO:

http://jsfiddle.net/dreamweiver/TvpRF/7/

Счастливое кодирование :)

0
Select Programming font:
<select name="IMEI" disabled="disabled">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">$</option>
</select>
<select name="city">
    <option value="">Select...</option>
    <option value="jhansi">Jhansi</option>
    <option value="Delhi">Delhi</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Kanpur">Kanpur</option>
</select>

document.getElementsByName('city')[0].addEventListener('change', function(e){
    var imei = document.getElementsByName('IMEI')[0];
    var city = e.target;
    imei.disabled = city.value != '' ? '' : 'disabled';
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню