Запустить выпадающее меню onChange программно - PullRequest
Новая
       24

Запустить выпадающее меню onChange программно

0 голосов
/ 17 мая 2018

Я заполняю раскрывающийся список загрузки страницы, используя некоторую бизнес-логику, и одно из значений МОЖЕТ (или не может) выбираться в зависимости от условий if.

Я не могу:

  1. Найти, какое значение выбирается после загрузки, если оно есть
  2. вызвать функцию 'onChange' для этого раскрывающегося списка, используя это выбранное значение, если было выбрано какое-либо значение

Пример кода, который я пытаюсь найти здесь: http://jsfiddle.net/v7QWd/1203/

<div id="outerDiv">

<select id="myDropdown" class="check">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</div>


$(document).ready(function () {

    //call on load
    someFunction();

     $(document).on('change', '#myDropdown', function() {
        localStorage.setItem('selected_val', $(this).val());
       alert($(this).val());

    });

    function someFunction(){
    var mycondition = "true";
    //run busines slogic
    var htmlVar = "";
    if(mycondition == 'true'){

    htmlVar = '<select id="myDropdown" class="check">'+
        '<option value="one">one</option>'+
        '<option value="two">two</option>'+
        '<option selected = "selected" value="three">three</option>'+
        '<option value="four">four</option>'+
        '</select>';
    }

    $("#outerDiv").empty();
    $("#outerDiv").append(htmlVar);

    }
});

Функция должна срабатывать сама для значения «три» (значение может изменяться в зависимости от условий выполнения). Таким образом, в основном, при загрузке страницы в этом примере должно быть указано «три».

Ответы [ 3 ]

0 голосов
/ 18 мая 2018

1-й: Нет необходимости использовать empty(), затем .append(), вы можете напрямую использовать html()

2-й: Событие изменения не будет запущенопоскольку элемент еще не представлен в DOM, поэтому вам нужно проверить, что html() завершен .. вам нужно использовать $.when().then()

3-й , чтобы вызвать событие, которое вы можетеиспользуйте .change() , как сказал @Daniel .. после события change(), а не до него 

$(document).ready(function () {
  // change event
  $(document).on('change', '#myDropdown', function() {
    //localStorage.setItem('selected_val', $(this).val());
    alert($(this).val());
  });
  
  //call on load
  $.when(someFunction()).then(function(){
    $('#myDropdown').change();
  });
});

// functions
function someFunction(){
  var mycondition = "true";
  //run busines slogic
  var htmlVar = "";
  if(mycondition == 'true'){

  htmlVar = '<select id="myDropdown" class="check">'+
  '<option value="one">one</option>'+
  '<option value="two">two</option>'+
  '<option selected = "selected" value="three">three</option>'+
  '<option value="four">four</option>'+
  '</select>';
  }

  $("#outerDiv").html(htmlVar);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="outerDiv"></div>
0 голосов
/ 18 мая 2018

попробуйте ниже

$(document).ready(function () { someFunction(); dropDownChange($('#myDropdown')); $(document).on('change', '#myDropdown', function() { dropDownChange($(this)); }); function dropDownChange(e){ localStorage.setItem('selected_val', e.val()); alert(e.val()); }; function someFunction(){ var mycondition = true; var htmlVar = ""; if(mycondition){ htmlVar = '<select id="myDropdown" class="check">'+ '<option value="one">one</option>'+ '<option value="two">two</option>'+ '<option selected = "selected" value="three">three</option>'+ '<option value="four">four</option>'+ '</select>'; } $("#outerDiv").html(htmlVar); }; });

http://jsfiddle.net/v7QWd/1207/

0 голосов
/ 17 мая 2018

Вы можете вызвать событие изменения вручную при загрузке страницы: 

$("#myDropdown").change();

Это должно произойти после того, как someFunction() или #myDropdown еще не будет существовать.

...