Добавить настраиваемый класс для выбора опции при открытии и закрытии в html
Как добавить настраиваемый класс к элементу опции выбора.
Сценарий: когда я нажимаю и открываю опцию выбора, должен быть добавлен «class = open». Когда он закрывается при щелчке за пределами dom или выборе какой-либо опции или повторном щелчке по раскрывающемуся списку следует добавить «class = close».
Мой код:
<select id = "sKMob_orderStatus">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select id = "skMob_orderDate">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
$('#sKMob_orderStatus').addClass('open');
console.info("triggered");
});
См. Образец: http://jsfiddle.net/T4yUm/298/
Может ли кто-нибудь предложить ответ.
Заранее спасибо.
Когда он закроется, нужно добавить "class = close", удалив "class = open".
Select закрывается, когда находится вне DOM ... вы хотите что-то еще?
Мне нужно добавить другой класс при открытии и закрытии опции выбора
@PriyankaS, проверьте мой ответ. Он делает то, что вам нужно.
@Himanshu Upadhyay спасибо. Можете ли вы увидеть мой другой вопрос
@PriyankaS смотри мой ответ на то, что ты хочешь
@Himanshu Upadhyay Пожалуйста, проверьте мой обновленный вопрос
Поля выбора - это элементы пользовательского интерфейса браузера, и мы не должны пытаться стилизовать их за пределы базовой ширины / высоты. Рекомендуем вместо этого использовать замену DOM в поле выбора.
Ответы 3
использовать focusout
$("#sKMob_orderStatus, #skMob_orderDate").focusout(function(){
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
});
ИЛИ щелкните документ (означает, что раскрывающийся список закрывается)
$(document).on('click',function(){
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
});
Когда выберите какой-либо вариант
$("#sKMob_orderStatus, #skMob_orderDate").change(function() {
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
});
Пока открывается выбор:
$("#sKMob_orderStatus, #skMob_orderDate").focus(function () {
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
}
Для комментариев при нажатии на стрелку
$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
$('#sKMob_orderStatus').addClass('open');
$('#sKMob_orderStatus').removeClass('close');
console.info("triggered");
});
$("#sKMob_orderStatus").focusout(function(){
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
});
var flag=false;
$("#sKMob_orderStatus").on('click',function(){
if (flag){
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
flag=false;
}
else
flag=true;
});.close{
color:red;
}
.open{
color:blue;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "sKMob_orderStatus">
<option>a</option>
<option>b</option>
<option>c</option>
</select>@PriyankaS вам нужно использовать 2 функции (одну для focusout и одну при выборе чего-либо (change)
@PriyankaS вы можете выбрать одну из функций focusout или на click в документе
Как добавить класс закрытия - если select уже находится в открытом состоянии, если мы щелкнем раскрывающийся список, он закроется
вы хотите, когда выберите, открывается, добавить класс, закрыть ?? /
Я имею ввиду при выборе по фокусу ??
Нет. Шаги для проверки: 1. Щелкните стрелку раскрывающегося списка, раскрывающийся список откроется - добавлен открытый класс. 2. Снова щелкните стрелку раскрывающегося списка, раскрывающийся список закрывается - класс закрытия не добавляется.
Я предлагаю вам сделать функцию для каждого выбора (не оба в одной функции)
Да . Спасибо
Я очень признателен, если вы отметите как ответ, если используете мой код
Добавьте еще одну функцию в свой код jquery, например:
$("#sKMob_orderStatus, #skMob_orderDate").on("mousedown",function(){
if ($("#sKMob_orderStatus").hasClass('open'))
{
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
}
else{
$('#sKMob_orderStatus').removeClass('close');
$('#sKMob_orderStatus').addClass('open');
}
console.info("triggered");
});
$(document).click(function(event) {
if (!$(event.target).is("#sKMob_orderStatus, #skMob_orderDate")) {
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
console.info("triggered back");
}
});
$("#sKMob_orderStatus, #skMob_orderDate").on("change" ,function(event) {
$('#sKMob_orderStatus').removeClass('open');
$('#sKMob_orderStatus').addClass('close');
console.info("triggered back");
});
Вторая функция проверит, был ли нажат за пределами элемента, и она удалит класс open и добавит класс close.
1. Когда мы выбираем какую-либо опцию в раскрывающемся списке, опция выбора закрывается. В этом сценарии, как добавить class = "close"
2. Также, если мы закроем опцию выбора, снова щелкнув раскрывающийся список, как добавить class = "close"
@PriyankaS, вы проверили мой обновленный ответ. Он работает в соответствии с обоими вашими требованиями, упомянутыми выше.
@ Himanshu Upadhyay Сценарий: 1. Щелкните раскрывающийся список, раскрывающийся список откроется - добавлен открытый класс. 2. Снова нажмите на раскрывающийся список, чтобы закрыть - класс закрытия не добавляется.
@PriyankaS вы хотите, прежде чем он закроет, добавьте класс, а затем закройте раскрывающийся список ???
@ Himanshu Upadhyay Нет. В приведенном выше коде только при выборе опции и нажатии на outisde dom "Close class is added" .... Но когда select находится в открытом состоянии, если мы снова нажимаем на понижение, он закрывается - в этом сценарии закрывается класс не добавляется.
Привет @PriyankaS, я снова обновил свой код. Итак, теперь, когда вы снова нажимаете на select (только select, а не на 1-й вариант a), он получит близкий класс.
Привет, когда мы щелкаем правой кнопкой мыши раскрывающийся список, это не раскрывающийся список, а добавление класса как открытого
Вы продолжаете добавлять разные сценарии @PriyankaS. Ответ дает идеальное решение в соответствии с вашим OP.
да ладно @PriyankaS. Думаю, ты сможешь это сделать сейчас. У вас 16 репутации.
я сделал это. Спасибо за решение
попробуйте этот хитрый альтернативный способ
$(function(){
$("#sKMob_orderStatus, #skMob_orderDate").on("focus focusout change",function(e){
switch(e.type){
case 'focus' :
$(this).addClass('open').removeClass('close');
break;
case 'focusout' :
case 'change' :
$(this).addClass('close').removeClass('open');
break;
}
});
});.open{color:green;}
.close{color:red;}<script src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id = "sKMob_orderStatus">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<select id = "skMob_orderDate">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
Он работает так, как вы хотите, в jsfiddle.