У меня есть очень простой выбор ввода, который позволяет множественный выбор. То, что я пытаюсь сделать, это просто отобразить в PRE выбранные варианты выбора. Кажется, что он работает нормально, когда дело доходит до одного выбора, но не при выборе нескольких вариантов.

Например, если я выбираю несколько вариантов, в моем PRE отображается только 1 элемент вместо массива.

Автор сценария: https://jsfiddle.net/

$('#selectpicker').on('change', function(){
    var test = $('#selectpicker').val();
    $.each(test, function (value) {
    $('#pre_support').html("");
    $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
    });
});

Есть ли у кого-нибудь идеи?

1
Daniel Ellison 17 Дек 2015 в 19:49

3 ответа

Лучший ответ

Потому что вы очищаете innerHtml pre_support в каждой итерации цикла $.each. Таким образом, он будет перезаписывать контент, который вы установили для "".

Переместите его за пределы цикла.

$('#pre_support').html(""); 
$.each(test, function (value) {       
    $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
});
3
Shyju 17 Дек 2015 в 16:53

Надеюсь, что это поможет вам и верю, что вы ищете это

$(document).ready(function() {
  $('#selectpicker').on('change', function() {
    $('#pre_support').html("");
    var test = $('#selectpicker').val();
    $.each(test, function(value) {
      $('#pre_support').append("<span class='btn btn-primary btn-xs'>" + this + "</span>");
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="selectpicker">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
  <option value="6">Test 6</option>
</select>
<span id="pre_support"></span>
1
Prakash 17 Дек 2015 в 17:12

Вот ваше исправление, пожалуйста, проверьте его один раз.

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

    var test = $('#selectpicker').val();

    $('#pre_support').html("");

    $.each(test, function (value) {
        $('#pre_support').append("<span class='btn btn-primary btn-xs'>"+this+"</span>");
    });
});

Вот демонстрация Fiddle, которую вы можете проверить.

Ваша ошибка в том, что вы очищаете html в каждой итерации.

1
Nirav Kamani 17 Дек 2015 в 17:09