Як перевірити, чи вибрано варіант?


146
$('#mySelectBox option').each(function() {
    if ($(this).isChecked())
       alert('this option is selected');
     else
       alert('this is not');
});

Мабуть, isCheckedце не працює. Тож моє запитання - що це правильний спосіб зробити це? Дякую.


2
00zebra00, дякую за те, що знайшли відповідь серед багатьох варіантів нижче. Однак, будь ласка, обов'язково повідомте про розмову в коментарях нижче про "найкращий" спосіб доступу до вибраного ресурсу. Загальна суть полягає в тому, що коли ви можете отримати доступ до елемента безпосередньо в javascript (за допомогою this.selected), ви повинні обійти за допомогою jQuery ( $(this).prop("selected")), але вони будуть працювати для вас.
veeTrain

Відповіді:


263

ОНОВЛЕННЯ

Більш прямим методом jQuery до обраного параметра буде:

var selected_option = $('#mySelectBox option:selected');

Відповідаючи на питання .is(':selected'), що ви шукаєте:

$('#mySelectBox option').each(function() {
    if($(this).is(':selected')) ...

Недоступний спосіб jQuery (можливо, найкраща практика):

$('#mySelectBox option').each(function() {
    if(this.selected) ...

Хоча, якщо ви просто шукаєте вибране значення, спробуйте:

$('#mySelectBox').val()

Якщо ви шукаєте текст обраного значення:

$('#mySelectBox option').filter(':selected').text();

Перевірте: http://api.jquery.com/selected-selector/

Наступного разу шукайте повторювані питання SO:

Отримати поточний вибраний варіант або Встановити вибраний варіант або Як отримати $ (цей) вибраний варіант у jQuery? або параметр [вибраний = вірно] не працює


Він використовує jQuery без поважних причин. використовувати власні властивості js DOM. погляньте на це
gdoron підтримує Моніку

3
Схоже, ви не прочитали моєї відповіді. this.selectedможна використовувати замість того, $(this).is(":selected")я думаю, для цього jsperf не потрібно, правда? Я не маю нічого проти використання jQuery !, але використовуйте його, коли вам це потрібно, а не тоді, коли він не дає нічого, крім накладних витрат та іншого коду.
gdoron підтримує Моніку

@gdoron this.selectedцілком дійсний, але він попросив належного способу jQuery зробити це.
iambriansсвіт

2
@gdoron Я повністю з тобою згоден. Можливо, нам із вихованців на jQuery потрібно взяти виправний клас JavaScript. :)
iambriansreed

2
@gmoron Ні, моє запитання було відхилено та проголосовано. Хоча гарна детективна робота.
iambriansсвіт

26

Ви можете отримати вибраний варіант таким чином:

$('#mySelectBox option:selected')...

LIVE DEMO

Але якщо ви хочете повторити всі варіанти, зробіть це, this.selectedзамість this.isCheckedякого не існує:

$('#mySelectBox option').each(function() {
    if (this.selected)
       alert('this option is selected');
     else
       alert('this is not');
});

LIVE DEMO

Оновлення:

Ви отримали багато відповідей, які пропонують вам скористатися цим:

$(this).is(':selected')ну, це можна зробити набагато швидше і простіше, this.selectedтак чому б вам використовувати його, а не метод рідного елемента DOM ?!

Читайте відомості про властивості та функції DOM у інформації про jQuery теги


1
@downvoter, хочете коментувати? вибратися з відтінків і боротися! :)
gdoron підтримує Моніку

Можливо, тому, що ви не відповіли на запитання, але передової практики. ;)
ямбрійськийрепортаж

1
@iambriansreed. Га ?! Я не відповів на запитання? яка частина питання не залишила відповіді?
gdoron підтримує Моніку

2
Цікаві дискусії тут. :) Не впевнений, чому всі відеореєстратори, але я ультрафіолетово всіх, хто користувався this.selected. Я погоджуюся з вашими коментарями щодо надмірного використання / зловживань jQuery. Частина знання jQuery, - це знати, коли не використовувати його. Зважаючи на це, майте на увазі, що ':selected'селектор є спеціальним селектором Sizzle, тому його використання вимикає використання querySelectorAllпідтримуваних браузерів. Це, звичайно, не кінець світу, оскільки він надає хороший, короткий код, але я особисто схильний уникати матеріалів, що стосуються лише Sizzle.

@gdoron Коли ви вказали на це питання в Meta, я зацікавився. Щодо DV, цей вузол може бути корисним для вас.
VisioN

4

Якщо ви не знайомі або вам не зручно is(), ви можете просто перевірити значення prop("selected").

Як видно тут :

$('#mySelectBox option').each(function() {
    if ($(this).prop("selected") == true) {
       // do something
    } else {
       // do something
    }
});​

Редагувати :

Як в коментарях зазначав @gdoron, більш швидкий і найдоцільніший спосіб отримати доступ до обраної властивості параметра - це через селектор DOM. Ось оновлення, яке відображає цю дію.

if (this.selected == true) {

здається, працює так само добре! Дякую гдорон.


Чи можете ви поясніть мені, чому він повинен використовувати $(this).prop("selected")замість нього this.selected?! що це тобі дає ??! ps Я не переживаю ...
gdoron підтримує Моніку

@gdoron, головна перевага, про яку я думав, - це знайомство. Я не впевнений, для чого isнайкраще використовувати, але мені подобається отримувати доступ до моїх властивостей за допомогою підтримки та attr. У більшості сценаріїв це може бути лише питанням смаку. Так, є цікавий розсип голосування!
veeTrain

2
Я пропоную ознайомитись із частиною інформації про теги " Знайти властивості та функції DOM" . немає ніяких причин використовувати повільніше код + більше коду, щоб робити просту річ. слід використовувати для складного селектора, як $ (...). is (": visiable"). jQuery .is()$(...).is('.foo > [name="aaa"] input') or for properties that are not native DOM elements properties like
gdoron підтримує Моніку

@gdoron; велике спасибі за вказівку на це Я відповідно оновив свою відповідь.
veeTrain

Без проблем. Ви можете підтримати мою відповідь, якщо ви вважаєте, що це краще, ніж інші. (Я не хочу, щоб відповідь $(this).is(':selected')була прийнята. Stackoverflow слід використовувати для вивчення кращих практик, а не звичайних помилок ...)
gdoron підтримує Моніку

3

Ви можете використовувати цей спосіб за допомогою jquery:

$(document).ready(function(){
 $('#panel_master_user_job').change(function () {
 var job =  $('#panel_master_user_job').val();
 alert(job);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="job" id="panel_master_user_job" class="form-control">
                                    <option value="master">Master</option>
                                    <option value="user">User</option>
                                    <option value="admin">Admin</option>
                                    <option value="custom">Custom</option>
                                </select>


2

використання

 $("#mySelectBox option:selected");

перевірити, чи є його конкретним варіантом myoption:

 if($("#mySelectBox option:selected").text() == myoption){
          //...
 }

Чи вас не порушили (тут є серійні голоси!), Але що таке myoption???
gdoron підтримує Моніку

1
просто рядок, який повинен бути прикладом, який ОП хоче перевірити, чи вибрано його
Mouna Cheikhna

Щодо голосування, можливо, ви захочете прочитати коментарі під моєю відповіддю .
gdoron підтримує Моніку

2

Розгляньте це як свій список вибору:

<select onchange="var optionVal = $(this).find(':selected').val(); doSomething(optionVal)">

                                <option value="mostSeen">Most Seen</option>
                                <option value="newst">Newest</option>
                                <option value="mostSell">Most Sell</option>
                                <option value="mostCheap">Most Cheap</option>
                                <option value="mostExpensive">Most Expensive</option>

                            </select>

то ви перевіряєте вибраний варіант на зразок цього:

function doSomething(param) {

    if ($(param.selected)) {
        alert(param + ' is selected!');
    }

}

0

У моєму випадку я не знаю, чому вибране завжди відповідає дійсності. Тож єдиний спосіб, який я міг придумати, це:

var optionSelected = false;
$( '#select_element option' ).each( function( i, el ) {
    var optionHTMLStr = el.outerHTML;

    if ( optionHTMLStr.indexOf( 'selected' ) > 0 ) {
        optionSelected = true;
        return false;
    }
});

0

Якщо ви хочете перевірити, чи вибрано варіант, то вам не потрібно повторювати всі параметри. Просто роби

if($('#mySelectBox').val()){
    // do something
} else {
    // do something else
}

Примітка. Якщо у вас є опція зі значенням = 0, яку потрібно вибрати, вам потрібно змінити умова if на $('#mySelectBox').val() != null


0

Якщо вам потрібно перевірити вибраний стан для конкретного значення :

$('#selectorId option[value=YOUR_VALUE]:selected')

0

Якщо ви хочете перевірити вибрану опцію через javascript

Найпростішим методом є додавання атрибута onchange у цей тег та визначення функції у js-файлі. Приклад, якщо у вашому HTML-файлі є такі параметри, як це

 <select onchange="subjects(this.value)">
               <option>Select subject</option>
               <option value="Computer science">Computer science</option>
               <option value="Information Technolgy">Information Technolgy</option>
               <option value="Electronic Engineering">Electronic Engineering</option>
               <option value="Electrical Engineering">Electrical Engineering</option>
 </select>

А тепер додайте функцію у файл js

function subjects(str){
    console.log(`selected option is ${str}`);
}

Якщо ви хочете перевірити вибрану опцію у файлі php

Просто дайте атрибут name у своєму тезі та перейдіть до нього глобальних змінних / масиву php-файлу ($ _GET або $ _POST).

<form action="validation.php" method="POST">
             Subject:<br>
            <select name="subject">
               <option>Select subject</option>
               <option value="Computer science">Computer science</option>
               <option value="Information Technolgy">Information Technolgy</option>
               <option value="Electronic Engineering">Electronic Engineering</option>
               <option value="Electrical Engineering">Electrical Engineering</option>
            </select><br>

         </form>

І у вашому PHP-файлі validation.php ви можете отримати доступ до цього

$subject = $_POST['subject'];
echo "selected option is $subject";
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.