Блог

Главная - Вопросы по программированию - javascript Измените значения выпадающего списка на основе другого выпадающего списка

javascript Измените значения выпадающего списка на основе другого выпадающего списка

#javascript

#javascript

Вопрос:

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

Пример: Первые выпадающие значения:

 01:00
01:30
02:00 // suppose i select 02:00 here
02:30
03:00
03:30
04:00
04:30
05:00
05:30

Вторые значения Dropdonw (для выбранных 02:00 в приведенном выше выпадающем списке должны выглядеть следующим образом)

 02:30
03:00
03:30
04:00
04:30
05:00
05:30

(Я использую C # с Asp.net здесь.)

Любой javascript для достижения вышеуказанного был бы высоко оценен

и используйте приведенный ниже скрипт, как предложил Салман

 <body onload="select()">
<script language="javascript">
function select(){
var select1 = document.getElementById("ddlFrom");
var select2 = document.getElementById("ddlTo");
select1.onchange = function filterDDL() {     // empty select2
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
  }     
 if (select1.selectedIndex == 0)
  { 
  return; 
    }
  for (var i = select1.selectedIndex; i < select1.options.length; i  )
   {  
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    select2.appendChild(o);

      }
   } 
}</script>

но не работает…пожалуйста, помогите с этим
Заранее спасибо

Комментарии:

1. Используете ли вы фреймворк javascript, такой как jQuery, или просто javascript? Это проще, если вы используете фреймворк.

Ответ №1:

Редактировать (используя jQuery для получения желаемых результатов):

 <select id="one">
    <option value="01:00">01:00</option>
    <option value="01:30">01:30</option>
    <option value="02:00">02:00</option>
    <option value="02:30">02:30</option>
    <option value="03:00">03:00</option>
    <option value="03:30">03:30</option>
</select>

<select id="two"></select>

<script type="text/javascript">
    $(function () {
        $("#one").change(function (e) {
            $("#two").empty();

            var options = 
            $("#one option").filter(function(e){
                return $(this).attr("value") > $("#one option:selected").val();
            }).clone();

            $("#two").append(options);
        });
    });
</script>

Комментарии:

1. не могли бы вы, пожалуйста, подробнее рассказать о том, как я мог бы связать отношение между этими двумя DDLS, спасибо

Ответ №2:

Ванильное решение на JavaScript и демо.

HTML

 <select name="select1" id="select1">
    <option value="">-- select an option --</option>
    <option value="01:00">01:00</option>
    <option value="01:30">01:30</option>
    <option value="02:00">02:00</option>
    <option value="02:30">02:30</option>
    <option value="03:00">03:00</option>
    <option value="03:30">03:30</option>
    <option value="04:00">04:00</option>
    <option value="04:30">04:30</option>
    <option value="05:00">05:00</option>
    <option value="05:30">05:30</option>
</select>
<select name="select2" id="select2">
</select>

JavaScript

 // this function must be wrapped inside onload event
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select1.onchange = function() {
    // empty select2
    while (select2.firstChild) {
        select2.removeChild(select2.firstChild);
    }
    if (select1.selectedIndex == 0) {
        return;
    }
    for (var i = select1.selectedIndex; i < select1.options.length; i  ) {
        var o = document.createElement("option");
        o.value = select1.options[i].value;
        o.text = select1.options[i].text;
        select2.appendChild(o);
    }
}

Комментарии:

1. итак, я думаю, что мне не следует снова указывать опции для выпадающего списка select2, и я обернул приведенный выше скрипт в функцию и поместил в body onload … все еще бесполезно

2. @Jam: сработала ли демонстрация на jsFiddle? (ссылка в самом верху моего ответа)

3. o.text у меня не сработал, но o.innerhtml сделал свое дело.

Ответ №3:

Для достижения этого существует несколько способов, каждый из которых может подойти для другого использования.

Фильтровать по значению

@Craig уже предложил это. Укажите значения параметров выпадающего списка. Когда что-то выбрано в первом, значения, меньшие или равные его значению, удаляются из второго выпадающего списка: http://jsfiddle.net/q8mLH /

Используя массив доступных пар

Создайте массив интересующих вас пар, затем, когда изменится select 1, обновите доступные параметры select2 на основе того, что определено в вашем массиве разрешенных пар: http://jsfiddle.net/AU6hq /

Пары AJAX база данных

Я не собираюсь приводить здесь пример, извините, но общая идея такова: вам нужно иметь несколько таблиц в вашей базе данных, скажем, «страны» и «города», где у каждой страны есть идентификатор, и у каждого города есть свой собственный уникальный идентификатор плюс идентификатор страны, в которой он находится. Вероятно, вы захотите отображать только города в выбранной стране.

Вы привязываете событие change() к выбранным округам и загружаете содержимое второго выбора с помощью вызова ajax, запрашивая базу данных для городов, которые находятся в выбранной стране.

Может быть больше, но мне не совсем хочется сегодня слишком много думать ;). В любом случае, я надеюсь, что это поможет.

[ПРАВИТЬ]

В моих примерах используется jQuery, я надеюсь, что это не проблема.