jQuery: Установить выбранное значение выпадающего списка в jquery по идентификатору, имени, классу

21/11/2021 15:46

Как установить выбранное значение выпадающего списка в jquery по идентификатору, имени, классу; В этом руководстве вы узнаете, как установить выбранное значение раскрывающегося списка в jquery по идентификатору, имени, классу.

Установить и получить выбранное значение раскрывающегося списка в jQuery по идентификатору, имени, классу и тегу

Использование метода jQuery change(); вы можете установить выбранное значение раскрывающегося списка в jquery по идентификатору, имени, классу и тегу с выбранными элементами html.

Пример 1: - Установить выбранное значение раскрывающегося списка в jquery по идентификатору
Пример 2: - Установить выбранное значение раскрывающегося списка в jquery по имени
Пример 3: - Установить выбранное значение раскрывающегося списка в jquery по классу

Перед установкой значения раскрывающегося списка в jQuery необходимо знать, какое получено значение выбранного раскрывающегося списка. Для этого мы взяли простой пример, который выглядит следующим образом:

$('select').on('change', function () {
    alert(this.value);
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery get the selected dropdown value on change</title>
    <style>
        div {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <select id="select_id" name="actors">
        <option>Test</option>
        <option selected="selected">Java</option>
        <option>Python</option>
        <option>Ruby</option>
        <option>PHP</option>
        <option>Jquery</option>
    </select>
    <div id="location"></div>
    <script>
        $('#select_id').on('change', function() {
            $('#location').text(this.value);
        });
    </script>
</body>

</html>

Пример 1: - Установить выбранное значение раскрывающегося списка в jquery по идентификатору

Давайте посмотрим на следующий пример, как jquery устанавливает значение выбранного параметра по идентификатору; как показано ниже:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jQuery get the selected dropdown value on change</title>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    Example 1:
    <select name="example1" id="example1" class="abc">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#example1').val("4");
        });
    </script>
</body>

</html>

Пример 2: - Установить выбранное значение раскрывающегося списка в jquery по имени

Давайте посмотрим на следующий пример, как jquery устанавливает значение выбранного параметра по имени; как показано ниже:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jQuery get the selected dropdown value on change</title>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    Example 2:
    <select name="example2" id="example2" class="abc">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
    </select>

    <script>
        $(document).ready(function() {
            $('select[name="example2"]').val("4");
        });
    </script>
</body>

</html>

Пример 3: - Установить выбранное значение раскрывающегося списка в jquery по классу

Давайте посмотрим на следующий пример, как jquery устанавливает значение выбранного параметра по классу; как показано ниже:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>jQuery get the selected dropdown value on change</title>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    Example 3:
    <select name="example3" id="example3" class="abc">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
    </select>

    <script>
        $(document).ready(function() {
            $(".abc").val('2');
        });
    </script>
</body>

</html>

Jquery

0 + 0 -

MakeCodes
0
512