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

Question

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

0

Я искал в Интернете какое-то время, и все же я не могу найти ответ, у меня есть три раскрывающихся меню на моем сайте.

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

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

например, если пользователь выбирает фильмы в первом, они не будут в других.

вот мои выпадающие списки

<select id="pref1select">
<option value="P">Preference One</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="P">Preference Two</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="P">Preference Three</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

Jamiex304 27 апр. 2014, в 04:14

Источник

Теги:

javascript

jquery

html

css

drop-down-menu

4 ответа

0

Это должно сработать для вас:

$(document).ready(function() {
    $(".preferenceSelect").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).attr("id");
        // Reset so all values are showing:
        $(".preferenceSelect option").each(function() {
            $(this).show();
        });
        $(".preferenceSelect").each(function() {
            if ($(this).attr("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).hide();
            }
        });
    });
});'

Adit 26 июнь 2015, в 11:02

0

Вы должны попробовать следующее:

  $(".preferenceSelect").on("change", function () {
            $(".preferenceSelect option").prop("disabled", false);
            var selectPref = $("option:selected", $(this)).val();
            var selectId = $(this).prop("id");
            $(".preferenceSelect option").each(function () {
                $(this).show();
            });
            $(".preferenceSelect").each(function () {
                if ($(this).prop("id") != selectId) {
                    $("option[value='" + selectPref + "']", $(this)).prop("disabled", true);
                }
            });

        });

Это должно быть для вас.

Naveen Chandra Tiwari 27 апр. 2014, в 04:25

0

не работал извините
Jamiex304 27 апр. 2014, в 11:11

0

Я считаю, что что-то подобное сделало бы трюк, учитывая HTML выше:

var $selects = $("select");

$selects.on("change", function(){
    var value = this.value;

    $("option[value='" + value +"']", $selects).prop("disabled", true);    
});

Это, очевидно, отключает дубликаты параметров, но это легко изменить, чтобы удалить их. Однако вы столкнетесь с небольшой проблемой, поскольку параметры "Предпочтения №" имеют одинаковое значение. Я бы рекомендовал либо сделать эти метки optgroup либо полностью удалить значения, и пометить их как отключенные с самого начала... так как вы не сможете их щелкнуть в первую очередь. Вы можете найти немного больше опций меток и разделителей ответы здесь.

пример

Chase 27 апр. 2014, в 00:17

Ещё вопросы

Andreas Storvik Strauman · Accepted Answer · 2014-04-26T23-25-00.000Z

Это отключит его, но не удалит.
Скрипт: http://jsfiddle.net/p2SFA/1/

HTML: (добавлен класс .preferenceSelect)

<select id="pref1select" class="preferenceSelect">
    <option value="P">Preference One</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select" class="preferenceSelect">
    <option value="P">Preference Two</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select" class="preferenceSelect">
    <option value="P">Preference Three</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

JQuery:

$(document).ready(function() {
    $(".preferenceSelect").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).prop("id");
        // Reset so all values are showing:
        $(".preferenceSelect option").each(function() {
            $(this).prop("disabled", false);
        });
        $(".preferenceSelect").each(function() {
            if ($(this).prop("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).prop("disabled", true);
            }
        });

    });
});

Если вы хотите, чтобы это было удалено, вам, вероятно, придется сделать jQuery знанием того, что нужно вставить, когда он сбрасывается, потому что сделан новый выбор :)

Вы не должны использовать attr в этом случае: stackoverflow.com/questions/5874652/prop-vs-attr
Ooh! Я узнаю так много нового здесь.
Мы все делаем =) Просто подумал, что я укажу на это, чтобы вы знали, похоже, вы позаботились об этом.
@ AndreasStorvikStrauman это работает только одна проблема, если вы выбираете значение, а затем изменяете его, оба значения по-прежнему блокируются для других, есть идеи?
@AndreasStorvikStrauman только что заметил проблему при добавлении этого кода в мой пример, он не отключает значение, выбранное в pref 1, когда вы выбираете из pref 3
Это работает на скрипке . Уверен, что вы реализуете это правильно? Также я решил предыдущую проблему.
@AndreasStorvikStrauman да, это работает в скрипке, но проблема в том, что в первом случае, если вы выбираете, скажем, фильм, а затем изменить его на телевизор, оба заблокированы в другом на выпадающие списки ?? то же самое в твоей скрипке?
Я знаю, где ошибка, и это не в моем коде, а в скрипке. jsfiddle.net/p2SFA/3
Тот же вопрос здесь, но я хочу динамически добавлять выпадающие списки и реализовывать эту функцию, пожалуйста, посмотрите stackoverflow.com/questions/43006815/…