Как динамически создавать <option>элементов в родительском <optgroup> - PullRequest
Новая
       29

Как динамически создавать <option>элементов в родительском <optgroup>

0 голосов
/ 12 июня 2018

Я пытаюсь динамически сгенерировать структуру, подобную 

 <select>
     <optgroup>
         <options> option 1 </option>
          <options> option 2 </option>
                   etc..
      </optgroup>
 </select>

, используя следующий код.Как вы можете видеть из экрана отладки, я не могу встроить опции в <optgroup>.Может кто-нибудь помочь, пожалуйста? 

    milestoneData =[{"phase_ID":21,"phase_name":"hello1"}, {"phase_ID":22,"phase_name":"hello2"}]
    var optionGroup = document.createElement("optgroup");
    optionGroup.setAttribute("label","Project 1");
    optionGroup.setAttribute("value","100");
    $(".test").append(optionGroup).attr("id","theid");
    for (var i = 0; i <  milestoneData.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value",milestoneData[i].phase_ID);
        option.innerHTML=milestoneData[i].phase_name;
        $('#theid').append(option);
   }

HTML-якорь <select id = "testid" name = "testing" class ="test" >

render produced by above code

Ответы [ 4 ]

0 голосов
/ 12 июня 2018

Вы смешиваете jQuery с ванильным JavaScript.Я бы порекомендовал использовать jQuery полностью, если вы собираетесь использовать его на своем сайте.

Вы можете воспользоваться меньшим кодом: 

$(document).ready(function() {
  var milestoneData = [{ "phase_ID": 21, "phase_name": "hello1" }, { "phase_ID": 22, "phase_name": "hello2" }];

  var optionGroup = $("<optgroup/>", {
    label: 'Project 1',
    value: '100'
  });

  for (var i = 0; i < milestoneData.length; i++) {
    var option = $("<option/>", {
      value: milestoneData[i].phase_ID,
      text: milestoneData[i].phase_name
    });

    optionGroup.append(option);
  }
  $(".test").append(optionGroup);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="test">

</select>
0 голосов
/ 12 июня 2018

Установить идентификатор для optgroup, например <optgroup id="optgroupID">

В JS: (предположим, что мы добавляем еще 3 опции) 

   var id = document.getElementById("optgroupID");  
   var value = document.getElementById("optgroupID").innerHTML;  
   for(var i=0;i<3;i++){  
      value += "<option>"+i+"</option>";  
   }  
   id.innerHTML = value;
0 голосов
/ 12 июня 2018

@ Александр, вам нужно добавить параметр с помощью optgroup, тогда группа optgroup будет добавлена ​​для выбора.Посмотреть решение 

$(document).ready(function(){
  var milestoneData =[{"phase_ID":21,"phase_name":"hello1"}, {"phase_ID":22,"phase_name":"hello2"}]
    var optionGroup = document.createElement("optgroup");
    optionGroup.setAttribute("label","Project 1");
    optionGroup.setAttribute("value","100");
    $(".test").append(optionGroup).attr("id","theid");
    for (var i = 0; i <  milestoneData.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value",milestoneData[i].phase_ID);
        option.innerHTML=milestoneData[i].phase_name;
        optionGroup.append(option);
       
   }
    $('#theid').append(optionGroup);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "testid" name = "testing" class ="test" ></select>
0 голосов
/ 12 июня 2018

Вы почти там, проблема, которая у вас сейчас есть, на $(".test").append(optionGroup).attr("id","theid");

Вы говорите, добавьте optionGroup к .test и добавьте элемент id к .test, который в вашемна случай, если вы добавите id к optionGroup

Так что это будет примерно так: 

$(document).ready(function() {
   milestoneData =[{"phase_ID":21,"phase_name":"hello1"}, {"phase_ID":22,"phase_name":"hello2"}]

    var optionGroup = document.createElement("optgroup");
    optionGroup.setAttribute("label","Project 1");
    optionGroup.setAttribute("value","100");
    optionGroup.setAttribute("id","theid");

    $(".test").append(optionGroup);

   for (var i = 0; i <  milestoneData.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value",milestoneData[i].phase_ID);
        option.innerHTML=milestoneData[i].phase_name;

        $('#theid').append(option);
   }
});

Я создал для вас быстрый jsfiddle: https://jsfiddle.net/gcpn10kd/1/

Вы можете проверить здесь некоторые примеры того, как optgroup должна быть структурирована

...