Home>

javascript - i want to set the selection state when adding a pull-down item (option element) with jquery

Please let me ask a question because I was stuck with creating a form page.

Enter each item in a certain form and move to the next page.
And when returning to the original page from the transition destination, the select box entered once and
You may want to redisplay the original value or the value already selected for the pull-down box.

This time for the pull-down item (option element) that dynamically acquires the value
The setting (selected) for the item selected when obtaining the display value or setting value is
I was unable to reflect it well, so I consulted you.

Use jquery to generate the display value and input value for the option element as shown below.

// Generate by specifying value and text
$("# select_test"). append ($("<option>"). val (hogeCd) .text (hogeName));

Although it was able to reflect so far, if you try to reflect the selected state further, it will not be reflected well.
Investigate

In html, I want to reflect this.

<select>
<option value = "1" selected = "selected">Option 1</option>
</select>

This
selected ="selected"
I want to reflect this part at the time of generating input value using jquery

// Generate by specifying value and text
$("# select_test"). append ($("<option>"). val (hogeCd) .text (hogeName));

Is there any way to reflect the "selected ="selected"" part of the description like this?

Thanks for your help. Thank you.

javascript jquery css html5
  • Answer # 1

    When generating a DOM with $(), if you specify the second argument in the key: value format, you can attach an attribute, so you only need to add selected: true.

    $(function () {
    $("# select_test"). append ($("<option>", {selected: true, val: "1", text: "1"}));
    $("# select_test"). append ($("<option>", {val: "2", text: "to"}));
})


    Result:

    <select id = "select_test">
  <option selected = "selected" value = "1">1</option>
  <option value = "2">to</option>
</select>

    Text and val were also inserted.

    [jQuery] Generation of DOM elements

  • Answer # 2

    Sample code 

    <! DOCTYPE HTML>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title></title>
    </head>
    <body>
        <select name = "select">
        </select>
        <script type = "text/javascript" src = "// code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type = "text/javascript">
            $(function () {
                var arr = {
                    0: 'text0',
                    1: 'text1',
                    2: 'text2',
                    3: 'text3'
                };
                $.each (arr, function (i, row) {
                    var option = $('<option>');
                    console.log (i);
                    option.val (i) .text (row) .appendTo ($("[name = select]"));
                });
                $("[name = select]"). val (3);
            });
        </script>
    </body>
</html>

Related articles