В настоящее время я использую jQuery, чтобы скрыть/показать опции выбора, используя следующий код.
$("#custcol7 option[value=" + sizeValue + "]").hide();
Это отлично работает в Firefox, но не делает ничего хорошего в других браузерах. Как скрыть параметры от выбора в Chrome, Opera и IE?
Я просто наткнулся на это и вместо того, чтобы клонировать весь выбор снова и снова, я просто заменил параметры, которые нужно скрывать с помощью элементов span и скрывать промежутки (хотя браузер не видел их в любом случае, я думаю) - вам может потребоваться изменить ваш код (если он сложный) для итерации по пролетам для сложной логики.
Пространства хранят ссылку на option и заменяют ее им, когда они должны быть показаны.
Этот код, очевидно, может быть рефакторирован и преувеличен.
http://fiddle.jshell.net/FAkEK/12/show/
РЕДАКТИРОВАТЬ № 2 (ИСПОЛЬЗУЙТЕ ЭТО ВМЕСТО): Мне пришло в голову, что вместо того, чтобы делать все это клонирование/ссылку/заменить дерьмо, просто оберните опцию с помощью span, скройте диапазон и нажмите покажите, просто замените диапазон с помощью опции снова.
Я думаю, что медитер предоставил действительный ответ, и здесь он немного изменился, чтобы отразить то, что работает для меня:
$.fn.optVisible = function( show ) {
if( show ) {
this.filter( "span > option" ).unwrap();
} else {
this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
}
return this;
}
Протестировано с помощью (long live BrowserStack):
Нет, это не поддерживается в IE (и, предположительно, не в Chrome или Opera). Вам нужно будет удалить все варианты и добавить их позже, если вы хотите, чтобы они были действительно невидимыми. Но в большинстве случаев простой disabled="disabled" должен быть достаточным и сложнее, чем обработка удаления и добавления параметров.
попробуйте отсоединить(). вы можете повторно подключить его позже, если необходимо, с помощью append() или insertAfter()
Для удаления параметров используйте:
var opt=$("option").detach();
Чтобы показать параметры, используйте:
opt.appendTo( "select" );
Просто удалите его и сохраните в var в JavaScript. Вы можете просто создать новый объект, когда вам это понадобится позже.
В противном случае попробуйте атрибут disabled, упомянутый выше.
/**
* Change visibility of select list option elements
* @param {boolean} stateVal show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it current state
*/
$.fn.toggleOptionVisibility = function (stateVal) {
var isBool = typeof stateVal === "boolean";
return this.each(function () {
var $this = $(this);
if (isBool) {
if (stateVal) $this.filter("span > option").unwrap();
else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
}
else {
$this.filter("span > option").toggleOptionVisibility(true);
$this.filter(":not(span > option)").toggleOptionVisibility(false);
}
});
};
то, как вы это сделали, должно работать в chrome, но nvm.Here это другой способ
select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();
и если вы хотите снова показать его:
select.append('<option value="'+sizeValue+'"></option>');
Он отлично работает в каждом браузере и его самом простом коде. Проблема в том, что если вы хотите скрыть несколько параметров, это более типизация.. но это можно решить, поместив их в переменные, если они не изменяются динамически:
var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';
select.append(options);
Таким образом, если вам нужно удалить/добавить несколько мест, вы только набрали параметры один раз. Надеюсь, я дал еще один интересный вариант. С наилучшими пожеланиями.
Также существует метод .load:
s_parent.change(function(){
s_child.load('./fetch_options.php",{'v',s_parent.val()});
}
"fetch_options.php" script будет просто печатать теги параметров на основе любого используемого источника данных и передаваемого родительского значения.
Мой выбор немного отличается от других ответов.
Цель состоит не в том, чтобы скрывать параметры, а просто заставлять их отключать (чтобы поддерживать согласованный интерфейс).
Мой сценарий:
У меня есть несколько выборок в форме, и когда пользователь выбирает параметр в одном из вариантов, остальные выбирают, должен отключить эту опцию и наоборот. Пользователь не может выбрать тот же вариант, который уже выбран. Обычно мы отключили опцию, но для IE 7, которая ее не поддерживает. Пользователь также получает возможность добавлять новые варианты.
Решение:
Нагрузка:
Если браузер IE7, то при заполнении выбранных и отключенных уже выбранных параметров на других выбирает, я добавляю настраиваемый атрибут к опции ( "data-ie7-disabled" ), а также изменяя цвет отключенных опций до " #cccccc '(который является стандартным цветом для отключенных опций). Это делает пользовательский интерфейс одинаковым в браузерах.
Вкл. Изменение:
Я сохраняю предыдущий параметр в локальной переменной (это сохраняется в фокусе).
Когда пользователь пытается изменить параметр
Пользователь выбирает полную новую опцию, которая не выбрана ни в каком другом выпадающем меню. Затем я прокручиваю другие выделения и меняю цвет и добавляю специальный атрибут к этому выбранному параметру при других выделениях.
Когда пользователь выбирает параметр, который уже выбран (параметр, который имеет серый цвет). Я проверяю, имеет ли этот параметр этот пользовательский атрибут. Если в нем есть > , я просто возвращаю вариант предыдущему с сообщением об ошибке "Этот параметр уже выбран или BLAH BLAH".
Когда пользователь изменяет свой существующий вариант на совершенно новую опцию, которая не выбрана ни в каком другом выпадающем меню. Я снова перебираю все остальные параметры выбора и удаляю цвет на нем, а также настраиваемый атрибут.
Надеюсь, это поможет.
Вы можете использовать комбинации var $opt=$('select>option').clone() и $('select option[value="'+val+'"').remove().
Есть еще один пример: попробуйте это. https://jsfiddle.net/sherali/jkw8fxzf/12/
var $secondOption= $('#second-choice>option').clone();
$("#first-choice").change(function() {
var userSelected = $(this).val();
$('#second-choice').html($secondOption);
$('#second-choice option[value="'+userSelected+'"').remove()
});
Вы можете использовать это:
$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});
Он отлично работает во всех браузерах, кроме Safari и Opera. Я ищу еще одно лучшее решение:)
Вам нужно будет удалить его, а затем добавить его снова для Internet Explorer.
Чтобы удалить:
$("#custcol7 option[value=" + sizeValue + "]").remove();
Чтобы добавить:
$("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );
Обратите внимание, что вам нужно иметь sizeValue также в тексте опции, чтобы фактически увидеть что-то.
используя решение, предоставленное AuthorProxy, оно отлично работает для IE, но когда я пытаюсь сделать .val() в раскрывающемся списке в firefox, я получаю некоторые фанковые значения, которые не имеют никакого смысла. Я изменил их вариант, чтобы включить специфические функции браузера, скрыть/показать работы для firefox.
$.fn.toggleOptionVisibility = function (stateVal) {
var isBool = typeof stateVal === "boolean";
return this.each(function () {
var $this = $(this);
if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
if (isBool) {
if (stateVal) $this.filter("span > option").unwrap();
else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
}
else {
$this.filter("span > option").toggleOptionVisibility(true);
$this.filter(":not(span > option)").toggleOptionVisibility(false);
}
}
else {
if (isBool) {
$this.show();
}
else {
$this.hide();
}
}
});
};
Вы также можете заменить html внутри select.
Html:
<input id="Button1" type="button" value="hide option" />
<select id="foo">
<option >stuff</option>
<option >stuff2</option>
</select>
Jquery:
$("#Button1").change(function () {
$('#foo').html('<option >stuff</option>');
});
Не то, что вы хотите, но, возможно, это помогает. Для небольших выпадающих меню это определенно проще.
В IE 11 (Edge) работает следующий код.
$("#id option[value='1']").remove();
и вернуться назад,
$('<option>').val('1').text('myText').appendTo('#id');