Как повторно выбрать элементы в списке? - PullRequest
Новая
       20

Как повторно выбрать элементы в списке?

1 голос
/ 04 апреля 2019

У меня есть веб-страница с двумя списками.У меня проблема с моим jQuery / JavaScript.Когда пользователь выбирает элемент в левом списке, он должен выбрать три элемента в правом списке.Это работает только в первый раз, если я не обновлю страницу.Я знаю, что код выполняется, потому что я могу пройти через него.Это кажется простой задачей, поэтому я должен что-то упустить.Я создал онлайн-образец проблемы на www.tutorialspoint.com , который показывает проблему. Пример списка в сети - нажмите кнопку предварительного просмотра.Спасибо за вашу помощь! 

<!DOCTYPE html>
<html>
<head>
<title>Re-select Items in Listbox</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

   $('#meters').change(function () {
    $('#baselines option').prop('selected', false); // Clear selected baselines

    var data = [2, 3, 4];

    var len = $('#baselines option').length;

    for (var i = 1; i <= len; i++) {
        $("#baselines option[value=" + i + "]").attr("selected", (data.indexOf(i) !== -1) ? true : false);
    }
});
});
</script>

</head>

<body>
<p id="myid">Is is a test of selecting items in listbox</p>

<div>
  <select class="form-control" id="meters" name="SelectedMeters" style="width: 200px;">
    <option value="1">12345678</option>
    <option value="2">1234567890</option>
  </select>

  <select class="form-control" id="baselines" multiple="True" name="SelectedBaselines" size="10" style="width: 200px;">
    <option value="1">MeterBaseline1</option>
    <option value="2">MeterBaseline2</option>
    <option value="3">MeterBaseline3</option>
    <option value="4">MeterBaseline4</option>
    <option value="5">MeterBaseline5</option>
    <option value="6">MeterBaseline6</option>
    <option value="7">PJM_MovingAvg</option>
  </select>
</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 04 апреля 2019

используйте removeAttr для отмены выбора опций и prop, чтобы выбрать его 

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
   
   $('#meters').change(function () {
    $('#baselines option').removeAttr('selected');
    
    var data = [getRndInteger(1, 2),getRndInteger(3, 4),getRndInteger(5, 7)];
    
    console.debug(data);

    var len = $('#baselines option').length;

    for (var i = 1; i <= len; i++) {
        $("#baselines option[value=" + i + "]").prop("selected", (data.indexOf(i) !== -1) ? true : false);
    }
});
});


</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<p id="myid">Is is a test of selecting items in listbox</p>

<div>
  <select class="form-control" id="meters" name="SelectedMeters" style="width: 200px;">
    <option value="1">12345678</option>
    <option value="2">1234567890</option>
  </select>

  <select class="form-control" id="baselines" multiple="True" name="SelectedBaselines" size="10" style="width: 200px;">
    <option value="1">MeterBaseline1</option>
    <option value="2">MeterBaseline2</option>
    <option value="3">MeterBaseline3</option>
    <option value="4">MeterBaseline4</option>
    <option value="5">MeterBaseline5</option>
    <option value="6">MeterBaseline6</option>
    <option value="7">PJM_MovingAvg</option>
  </select>
</div>
</body>
</html>
1 голос
/ 04 апреля 2019

Вы хотите изменить следующую строку:

$("#baselines option[value=" + i + "]").attr("selected", (data.indexOf(i) !== -1) ? true : false);

Для использования prop вместо использования attr :

$("#baselines option[value=" + i + "]").prop("selected", (data.indexOf(i) !== -1) ? true : false);

...