как из строки сделать массив и поместить данные с этого массива в select

178

06 декабря 2018, 05:20

задача состоит в том чтобы при клике на кнопку .btn получить .elem атрибут data-category="option-1, option-2, option-3 ..." и потом найти каждое значение в option value и сделать его selected, ... как это можно сделать

html:
<div class="elem" data-category="option-1, option-2, option-3, option-4"></div>
<button>add to select</button>
<select class="js-select">
<option value="option-1"></option>
<option value="option-2"></option>
<option value="option-3"></option>
<option value="option-4"></option>
</select>
js:
$("button").click(function() {
  var category = $(".elem").attr("data-categories");
  var catArr = category.split(",");
});

Answer 1

Вот вариант без jQuery:

<div data-category="option-1, option-2, option-3, option-4"></div>
<button>add to select</button>
<select class="js-select"></select>
<script>
var selectBox = document.querySelector('.js-select');
var categories = document.querySelector('[data-category]');
var options = categories.getAttribute('data-category').split(', ');
var button = document.querySelector('button');
button.addEventListener('click', function() {
    for(var i = 0, l = options.length; i < l; i++){
        var option = options[i];
        selectBox.options.add( new Option(option, option) );
    }
});
</script>

jQery:

<div class="elem" data-category="option-1, option-2, option-3, option-4"></div>
<button class="btn btn-default">add to select</button>
<select class="js-select"></select>
<script>
$("button").click(function() {
  var category = $(".elem").attr("data-category");
  var catArr = category.split(", ");
  $.each(catArr, function(key, value) {   
     $('.js-select')
         .append($("<option></option>")
                    .attr("value", value)
                    .text(value)); 
    });
});
</script>