Как программно выбрать параметр внутри переменной с помощью 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: извините за путаницу, вопрос был обновлен с моей реальной ситуацией.
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>
вы можете попробовать просто установить значение раскрывающегося списка на тот, который вы хотите "выбрать" - как
$("#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>
selected= "selected" будет работать
var html = '<select>'+
'<option value="10">10</option>'+
'<option value="20" selected="selected">20</option>'+
'</select>';
$('#select_handle').append(html);
по умолчанию, первый опции будет выбран - если вы хотите сделать на любом другом наборе это так, используя индекс как только 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>
вы можете сделать это jQuery С помощью .attr()
функции nth
псевдо-селектор.
вот так:
$("option:nth-child(1)").attr("selected", "");
надеюсь, что это помогает! :-)
после добавления попробуйте $('#select_handle select').val("10");
или 20 или любое значение, которое вы хотите выбрать