Как программно выбрать параметр внутри переменной с помощью jQuery

скажем, у меня есть эта переменная html, которая содержит эти параметры выбора:

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';

как я могу программно выберите опцию, которая находится внутри переменной html, поэтому, когда я добавляю их куда-нибудь, например 

$(this).children('div').append(html);

он станет таким:

<div> <!-- children div of the current scope -->
  <select>
    <option value="10" selected>10</option>
    <option value="20">20</option>
  </select>
</div>

как это возможно?

edit: содержимое переменной генерируется из удаленных мест, и я должен изменить значение локально, прежде чем оно будет добавляется в div. Отсюда и вопрос.

edit 2: извините за путаницу, вопрос был обновлен с моей реальной ситуацией.

9
html javascript jquery jquery-selectors

6 ответов

вы можете поместить HTML в элемент jQuery и выбрать значение в индексе 0. Затем вы можете добавить его в DOM.

вот простой плагин jQuery для выбора опции по индексу.

(function($) {
  $.fn.selectOptionByIndex = function(index) {
    this.find('option:eq(' + index  + ')').prop('selected', true);
    return this;
  };
  $.fn.selectOptionByValue = function(value) {
    return this.val(value);
  };
  $.fn.selectOptionByText = function(text) {
    this.find('option').each(function() {
      $(this).attr('selected', $(this).text() == text);                                 
    });
    return this;
  };
})(jQuery);

var $html = $([
  '<select>',
    '<option value="10">10</option>',
    '<option value="20">20</option>',
  '</select>'
].join(''));

$('#select-handle').append($html.selectOptionByIndex(0));
// or
$html.selectOptionByValue(10);
// or
$html.selectOptionByText('10');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-handle"></div>
7

вы можете попробовать просто установить значение раскрывающегося списка на тот, который вы хотите "выбрать" - как $("#select_handle select").val( a_value );

например, если a_value is 30 он добавит необходимый HTML к узлу DOM. Вот мой ответ:

$(function() {
  var html = '<select>' +
      '<option value="10">10</option>' +
      '<option value="20">20</option>' +
      '<option value="30">30</option>' +
      '<option value="40">40</option>' +
      '<option value="50">50</option>' +
    '</select>';

  // set a value; must match a 'value' from the select or it will be ignored
  var a_value = 30; 

  // append select HTML
  $('#select_handle').append(html);

  // set a value; must match a 'value' from the select or it will be ignored
  $("#select_handle select").val(a_value);

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

<h2>select added below</h2>
<div id="select_handle">
</div>
4

selected= "selected" будет работать

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20" selected="selected">20</option>'+
            '</select>';

            $('#select_handle').append(html);
3

по умолчанию, первый опции будет выбран - если вы хотите сделать на любом другом наборе это так, используя индекс как только select добавлено:

$('#select_handle option:eq(1)').prop('selected', true)

(выбирается второй вариант)

см. демо ниже:

var html = '<select>'+
             '<option value="10">10</option>'+
             '<option value="20">20</option>'+
            '</select>';
$('#select_handle').append(html);
$('#select_handle option:eq(1)').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select_handle"></div>
3

вы можете сделать это jQuery С помощью .attr() функции nth псевдо-селектор.

вот так:

$("option:nth-child(1)").attr("selected", "");

надеюсь, что это помогает! :-)

3

после добавления попробуйте $('#select_handle select').val("10"); или 20 или любое значение, которое вы хотите выбрать

2