Отмените выбор выбранных параметров в меню выбора с несколькими группами и опциями

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

Вот пример меню:


Select One

Abrasives


Abstracters


Abuse Information & Treatment Centers


Accountants
Certified Public Accountants - 
Public Accountants - 


Accounting Services


Acoustical Materials - Wholesale & Manufacturers


Вы увидите, что выбраны два .. Я хочу иметь возможность отменить выбор этих предварительно выбранных.

Не хотите использовать JQuery, просто хотите использовать Javascript

Большое спасибо за вашу помощь.

neojakey

Ответы на вопрос(7)

Не будет ли проще просто использовать?

document.getElementById("ddBusinessCategory").value = "";
 Nick Chan Abdullah12 сент. 2017 г., 19:18
это должен быть ответ
 Kirby L. Wallace14 сент. 2017 г., 18:38
Спасибо за вотум доверия Ника. ;-) Я 'по крайней мере, приехать ЗАКРЫТЬ, чтобы получить мой "первый ответ значок " (если есть такая вещь. Если нет, то должно быть. ;-)
 Graham22 июн. 2018 г., 12:25
Это работает для меня, но если есть вариант со значением "", тогда он выбрал бы тот. Возможно, что-то неясное было бы лучше (например, ... value = "# $ ~»;)

Ты нене нужно никаких петель. Свойство selectedIndex "Устанавливает или возвращает индекс выбранного элемент в коллекции (начинается с 0) ".

Индексирование начинается с 0, поэтому, если вы установите его на -1, ни один не будет выбран. (установка в 0 оставит первый выбранный вариант.)

function clearSelected(w){
  document.getElementById(w).selectedIndex = -1;
}
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>

Вы можете упростить код из Chase с помощью свойства javascript "selectedOptions»

HTML

<a href="#" onclick="clearSelected();">clear</a>

JAVASCRIPT

function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").selectedOptions;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

В этом случае вы делаете цикл с уже выбранными опциями, а не со всеми опциями.

Если вы нене волнует < IE8:

var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked");

​for(var i = 0, length = checkedElements.length; i < length; i++) {
    checkedElements[i].selected = false;
}​

Если вы нене волнует < IE9

Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false });

Используйте ответ от Чейза, если вы хотите поддержать IE7, IE6, FF3 и более ранние версии или чувствуете это »легче читать.

Если вы используете jquery, вы можете это сделать (я знаю, что человек, который спросил это, ожидает ответа js, но это может кому-то помочь)

$('#someid').find($('option')).attr('selected',false)
 Daniell03 авг. 2018 г., 18:06
Возможно, это было правильно в 2014 году, но в настоящее время это победило• обновить пользовательский интерфейс (опции по-прежнему будут выбираться визуально). Вместо этого вам нужно использовать .prop (и избавиться от ненужного вызова $ внутри функции find: $ ('#someid»).находить('опция») .Prop (»выбран»,ложный)

Если вы хотите просмотреть только выбранные параметры, я предлагаю цикл while.

var elements = document.getElementById("ddBusinessCategory").selectedOptions;
while (elements.length > 0)
{
    elements[0].selected = false;
}

Ответ Мишеля Сахли не будет работать, когда есть несколько вариантов выбора, потому что по мере прохождения цикла for значениеelements.length изменения.

Тем не менее, атрибут .selectedOptions немного хлопотно (см.Выбранный вариант не работает или ...?) так что, вероятно, не стоит каких-то крошечных сбережений, которые вы получаете, только просматривая выбранные опции.

Решение Вопроса

Следующая функция должна пройти по всем параметрам и отменить их выбор.

HTML

<a href="#" onclick="clearSelected();">clear</a>

JAVASCRIPT

 function clearSelected(){
    var elements = document.getElementById("ddBusinessCategory").options;

    for(var i = 0; i < elements.length; i++){
      elements[i].selected = false;
    }
  }

РЕДАКТИРОВАТЬ:

Я неНе рекомендуется помещать обработчик событий непосредственно в элемент. Если у вас есть опция, присвойте элементу тип id / name и свяжите обработчик событий в вашем коде JavaScript.

ПРИМЕР

 Grijesh Chauhan16 янв. 2014 г., 11:00
Ваш ответ был очень полезным для меня, но я думаю, что вы можете удалитьif(elements[i].selected) ? я прав.
 Chase09 окт. 2012 г., 17:08
Рад это слышать и удачи!
 Chase16 янв. 2014 г., 15:13
@GrijeshChauhan - Абсолютно! Я'Мы обновили ответ выше и удалили эту строку. Там'нет причин проверять, тына самом деле ничего не экономя на этом. Хороший звонок =)
 neojakey09 окт. 2012 г., 17:06
Блестящий @ Чейз большое спасибо .. именно то, что я хотел ..!

Ваш ответ на вопрос