Как проверить, выбрана ли опция?


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/

В следующий раз ищите дублирующие ТАК вопросы:

Получить текущую выбранную опцию или Задать выбранную опцию или Как получить выбранную опцию в $ (this) в jQuery? или опция [selected = true] не работает


Он использует JQuery без уважительной причины. используйте нативные свойства JS DOM. посмотрите на это
Гдорон поддерживает Монику

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

@gdoron this.selectedполностью действителен, но он попросил правильный способ jQuery сделать это.
iambriansreed

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

2
@gmoron Нет, мой вопрос был отклонен и проголосовал. Хорошая детективная работа, хотя.
iambriansreed

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, хочешь прокомментировать? Выйди из тени и сражайся! :)
Гдорон поддерживает Монику

Может быть, потому что вы не ответили на вопрос, но дали лучшие практики. ;)
iambriansreed

1
@iambriansreed. Ха ?! Я не ответил на вопрос? какая часть в вопросе осталась без ответа?
Гдорон поддерживает Монику

2
Интересные обсуждения здесь. :) Не уверен, почему все DVs, но я UV, все, кто использовал 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, главное преимущество, о котором я подумал, - это дружеские отношения. Я не уверен, для чего isлучше всего использовать, но мне нравится доступ к моим свойствам через prop и attr. В большинстве случаев это может быть просто вопросом вкуса. Да, есть любопытная вспышка понижающего голосования!
veeTrain

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

@gdoron; Большое спасибо за указание на это. Я обновил свой ответ соответственно.
veeTrain

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

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???
Гдорон поддерживает Монику

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

Что касается понижения голосов, вы можете прочитать комментарии под моим ответом .
Гдорон поддерживает Монику

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), посмотрите пример, если ваш html-файл похож на этот

<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.