JQuery создать новый вариант выбора

У меня есть следующие функции в регулярных JavaScript, создающих опции выбора. Есть ли способ сделать это с помощью jQuery без использования объекта формы? Возможно, хранение опций в виде массива объектов JSON и разбор его в вызывающей функции...

function populate(form)
{
form.options.length = 0;
form.options[0] = new Option("Select a city / town in Sweden","");
form.options[1] = new Option("Melbourne","Melbourne");
}

Ниже я называю функцию выше:

populate(document.form.county); //county is the id of the dropdownlist to populate.

Ответы

Ответ 1

Что-то вроде:

function populate(selector) {
  $(selector)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

populate('#myform .myselect');

Или даже:

$.fn.populate = function() {
  $(this)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

$('#myform .myselect').populate();

Ответ 2

Что насчет

var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text('myText');
$('#county').append(option);

Ответ 3

Как насчет

$('#county').append(
    $('<option />')
        .text('Select a city / town in Sweden')
        .val(''),
    $('<option />')
        .text('Melbourne')
        .val('Melbourne')
);

Ответ 4

Если вам нужно сделать один элемент, вы можете использовать эту конструкцию:

$('<option/>', {
    'class': this.dataID,
    'text': this.s_dataValue
}).appendTo('.subCategory');

Но если вам нужно напечатать много элементов, вы можете использовать эту конструкцию:

function printOptions(arr){
    jQuery.each(arr, function(){
        $('<option/>', {
            'value': this.dataID,
            'text': this.s_dataValue
        }).appendTo('.subCategory');
    });
}

Ответ 5

Это сбивает с толку. Когда вы говорите "объект формы", вы имеете в виду "<select> element"? Если нет, ваш код не будет работать, поэтому я предположим, что ваша переменная form на самом деле является ссылкой на элемент <select>. Почему вы хотите переписать этот код? То, что у вас есть, работало во всех браузерах с возможностью просмотра сценариев с 1996 года и не прекратит работать в ближайшее время. Выполнение этого с помощью jQuery немедленно сделает ваш код более медленным, более подверженным ошибкам и менее совместимым в браузерах.

Здесь функция, которая использует ваш текущий код в качестве начальной точки и заполняет элемент <select> из объекта:

<select id="mySelect"></select>

<script type="text/javascript>

function populateSelect(select, optionsData) {
    var options = select.options, o, selected;
    options.length = 0;
    for (var i = 0, len = optionsData.length; i < len; ++i) {
        o = optionsData[i];
        selected = !!o.selected;
        options[i] = new Option(o.text, o.value, selected, selected);
    }
}

var optionsData = [
    {
        text: "Select a city / town in Sweden",
        value: ""
    },
    {
        text: "Melbourne",
        value: "Melbourne",
        selected: true
    }
];

populateSelect(document.getElementById("mySelect"), optionsData);

</script>

Ответ 6

Действительно простой способ сделать это...

// create the option
var opt = $("<option>").val("myvalue").text("my text");

//append option to the select element
$(#my-select).append(opt);

Это может быть сделано разными способами, даже в одну строку, если вы действительно этого хотите.

Ответ 7

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

мой код: - HTML: -

<.select style = "width: auto" name = "height" id = "height1">

JQuery: -

$ ( "# Height1"). Нажмите (функция() {

        var radioValue = $("input[name='height']:checked").val();

        if(radioValue=="f") {
            $("option").remove();
            var f = 4;
            var c = 0;
            while (f < 7) {
                if (c==12) {
                    c = 0;
                     ++f;
                    $("#height1").append($("<option>").attr("value", f+"."+c).text(f+"."+c));

                }
                else{ $("#height1").append($("<option>").attr("value", f+"."+c).text(f+"."+c));}
                ++c;
            }}

    })