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

Вот мой выбор и массив json, который я мог бы использовать для заполнения второго div на основе выбора.

Я хочу сначала стереть вторые параметры выбора, затем заполнить параметры и установить выбранное значение для первого элемента.

<select name="select1" id="select1" class="form-control">
    <option value="2">Theme 1</option>
    <option value="1">Theme 2</option>
    <option value="0">unnamed theme</option>
</select>

<select name="select2" id="select2" class="form-control">
    <option value="49">Products</option>
</select>

массив json (созданный из значений базы данных с использованием PHP для его вывода)

{"2":{"49":"Products"},"1":{"48":"Product 48","50":"Opportunity","51":"Enroll"},"0":{"52":"Discover product 52","53":"Moringa Support","54":"Product 54","55":"product 55"}}

json jquery select selection populate
person Damon Hogan    schedule 11.03.2016    source источник
comment
Очевидно, вы разместили этот вопрос, чтобы опубликовать решение, которое вы уже придумали, и это нормально, но ваша проблема кажется слишком локализованной, чтобы решение могло быть очень полезным для других. ИМХО, решение должно быть более абстрактным, чтобы оно было полезным для других.   -  person Wesley Smith    schedule 11.03.2016
comment
Ваш код не должен быть сложным для выполнения сложных задач. Мой комментарий был искренне предназначен, чтобы помочь вам понять это. Ваш код был написан для решения вашей конкретной проблемы, и он отражает, что, например, посмотрите на структуру вашего JSON, функция зависит от этой конкретной структуры, но эта структура имеет значение только для вас и будет потеряны для других, более многоразовая структура может быть чем-то вроде {"options":[{"value":"someValue", "text":"someText"}]} понимаете, что я имею в виду? Это может быть полезно для других с аналогичной проблемой   -  person Wesley Smith    schedule 11.03.2016
comment
Но я не могу ожидать, что вы поймете эту концепцию, когда используете loopCounter для отслеживания значения в цикле .each(), который уже имеет доступ к тому же значению через переменную index, объявляет все свои переменные в глобальном масштабе без всякой причины, и пишет вдвое больше кода, необходимого для решения простой проблемы, а затем публикует этот код в Интернете с эй, смотрите, что я сделал бессмысленной ухмылкой;)   -  person Wesley Smith    schedule 11.03.2016
comment
Я добавил ответ ниже, чтобы показать вам, что я имею в виду, надеюсь, вы воспримете его как коллегу-кодировщика, честно пытающегося помочь вам, а не реагируя на зло, как показывает ваш комментарий выше, вы могли бы, в любом случае, я надеюсь, что это поможет вам учиться. Удачного кодирования :)   -  person Wesley Smith    schedule 11.03.2016

Ответы (1)


arrow_upward
0
arrow_downward

Ниже показано, как я бы это сделал.

По сути это работает так:

  • при первом выборе добавьте класс select-master
  • добавьте атрибут данных select-info, значением которого является имя переменной, содержащей необходимый JSON
  • добавьте атрибут данных select-slave, значение которого является селектором для второго поля выбора
  • прикрепите обработчик событий к любому выбору с классом select-master
  • когда select-master изменится, используйте выбранное значение, чтобы получить параметры из JSON, получить второй выбор, заполнить его параметрами

Обратите внимание, что я изменил структуру вашего JSON. Я сделал это для того, чтобы структура имела смысл.

$('.select-master').change(function(){
     var $this = $(this);
     var val = $this.val();
     var possibleSelections =window[$this.data('select-info')]; // get the JSON for this box, you could store the JSON in the data attribute itself but this method makes it easier to use the same JSON for multiple boxes easily if needed
     var $slave = $($this.data('select-slave')).html(''); // get the selector for the other select box, find the box, and clear it's contents all in one go
     var selection = possibleSelections[val];
     if(selection){
         $.each(selection.options,function(i,option){
             var selected = i == 0 ? 'selected' : '';
             $slave.append('<option selected="'+selected+'" value="'+option.value+'">'+option.text+'</option>');
         });
     }
});

var selections = {
  "0": {
    options: [{
      value: 52,
      text: "Discover product 52"
    }, {
      value: 53,
      text: "Moringa Support"
    }, {
      value: 54,
      text: "Product 54"
    }, {
      value: 55,
      text: "product 55"
    }]
  },
  "1": {
    options: [{
      value: 48,
      text: "Product 48"
    }, {
      value: 50,
      text: "Opportunity"
    }, {
      value: 51,
      text: "Enroll"
    }]
  },
  "2": {
    options: [{
      value: 49,
      text: "Products"
    }]
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="select1" id="select1" class="form-control select-master" data-select-slave="#select2" data-select-info="selections">
  <option value="2">Theme 1</option>
  <option value="1">Theme 2</option>
  <option value="0">unnamed theme</option>
</select>

<select name="select2" id="select2" class="form-control">
  <option value="49">Products</option>
</select>

person Wesley Smith    schedule 11.03.2016
comment
@DamonHogan Добавить любые возможные значения из базы данных так же просто, как вызвать var selections = <?php echo $selections; ?> при создании HTML-кода страницы или любым другим методом, который вы выберете. Дело в том, что selections является переменной и может быть установлена ​​как угодно. Все мои замечания остаются в силе, в вашем методе все еще слишком много недостатков, чтобы указать их в комментарии. Это лучшее решение, даже если вы проголосовали за него назло. Удачного кодирования ;) - person Wesley Smith; 14.03.2016