Javascript-форум - Выделить заданные value в списке <select>

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Выделить заданные value в списке <select> (https://javascript.ru/forum/dom-window/33091-vydelit-zadannye-value-v-spiske-select.html)

Выделить заданные value в списке <select>

Добрый вечер!
Это мое первое сообщение на этом форуме, прошу отнестись с пониманием.
У меня есть список <select></select>, где более 150 элементов <option>
Мне необходимо привязать к нему javascript, чтобы была возможность выделить заданные значения value
Что-то типа этого:

<select id="ret" name="pet">
<option value="0">Выберите</option>
	<option value="19">Россия</option>
	<option value="20">Узбекистан</option>
	<option value="21">Казахстан</option>
	<option value="22">Азербайджан</option>
	<option value="23">Австралия</option>
	<option value="24">Австрия</option>
	<option value="25">Алжир</option>
	<option value="26">Ангилья</option>
	<option value="27">Англия</option>
	<option value="28">Ангола</option>
	<option value="29">Антигуа</option>
</select>

Список обрезал, что бы не растягивать колбасу.

Для чего это надо. Разбиваем список стран на 3 или 4 группы. У каждой группы своя цена доставки. Например, value со значением (19,20,23,27) имеет одну цену, value со значением (21,22,25) имеют другую цену и value со значением (24,26,28,29,30) имеют третью цену.
При назначении цены в админке я кликом выделяю первую группу и назначаю одну цену. Затем выделяю вторую группу и назначаю другую цену. И так далее аналогично. Количество таких групп 4-5.

Стран много, около 150, товара еще больше. Если все это вручную делать, то как раз до первого пришествия.

Буду благодарен Вам за подсказки, как это реализовать на практике.
Желательно готовое решение, ввиду отличного понимания javascript.

Как говорится, на форум надейся, но сам не раскисай!

После некоторых изыскание по интернету нашел решение. Выкладываю, может кому пригодится.

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
   <select id="multiselector" name="prods[]" multiple='multiple' size=14>
<option value="0">Выберите</option>
	<option value="19">Россия</option>
	<option value="20">Узбекистан</option>
	<option value="21">Казахстан</option>
	<option value="22">Азербайджан</option>
	<option value="23">Австралия</option>
	<option value="24">Австрия</option>
	<option value="25">Алжир</option>
	<option value="26">Ангилья</option>
	<option value="27">Англия</option>
	<option value="28">Ангола</option>
	<option value="29">Антигуа</option>
	<option value="30">Аргентина</option>
	<option value="31">Армения</option>
	<option value="32">Аруба</option>
</select>

<input type="button" onClick="select1();" value="Выбрать цены1" />
<input type="button" onClick="select2();" value="Выбрать цены2" />
<input type="button" onClick="select3();" value="Выбрать цены3" />  
  <script language="JavaScript" type="text/javascript">
<!--

function inside(arr,index)
{
for(var i=0;i<arr.length;i++)
{
if (arr[i]==index)
{
return true;
}
}
return false;
}

function select1()
{
var objSel = document.getElementById('multiselector');
var selIndexes = [19,20,21,25];
for (var i=0; i < objSel.options.length; i++)
{
if (inside(selIndexes,objSel.options[i].value))
{
objSel.options[i].selected=true;
}
else
{
objSel.options[i].selected=false;
}
}
}
function select2()
{
var objSel = document.getElementById('multiselector');
var selIndexes = [22,23,24,29];
for (var i=0; i < objSel.options.length; i++)
{
if (inside(selIndexes,objSel.options[i].value))
{
objSel.options[i].selected=true;
}
else
{
objSel.options[i].selected=false;
}
}
}
function select3()
{
var objSel = document.getElementById('multiselector');
var selIndexes = [26,27,28,30];
for (var i=0; i < objSel.options.length; i++)
{
if (inside(selIndexes,objSel.options[i].value))
{
objSel.options[i].selected=true;
}
else
{
objSel.options[i].selected=false;
}
}
}    
//-->
</script> 
  </body>
</html>

Да, что-то с первого раза не очень тепло приняли !!!

Ну да ладно, главное есть решение, жизнь продолжается!!!
:dance: :dance: :agree: :thanks: :victory: :dance: :dance:

<select id="ret" name="pet" multiple="multiple" size="10">
    		<optgroup label="Группа 1">
			    <option value="19">Россия</option>
			    <option value="20">Узбекистан</option>
			    <option value="21">Казахстан</option>
			    <option value="22">Азербайджан</option>
    		</optgroup>
    		<optgroup label="Группа 2">
			    <option value="23">Австралия</option>
			    <option value="24">Австрия</option>
			    <option value="25">Алжир</option>
			    <option value="26">Ангилья</option>
			    <option value="27">Англия</option>
			    <option value="28">Ангола</option>
			    <option value="29">Антигуа</option>
    		</optgroup>
		</select>
		<script>
			var listbox = document.getElementById('ret');
			listbox.addEventListener('mousedown', function(e){
				var target = e.target;
				switch (target.nodeName)
				{
					case 'OPTION':
						var groupNode = target.parentNode;
						break;
					case 'OPTGROUP':
						var groupNode = target;
						break;
					default:
						return;
				}
				Array.prototype.forEach.call(this.options, function(option){
					option.selected = option.parentNode == groupNode;
				});
				this.focus();
				e.preventDefault();
			});
		</script>

Нужно немного доточить, если нужна поддержка IE8.

Нужно немного доточить, если нужна поддержка IE8.

Это же только для админки надо, есть ли смысл?

А вообще, мне ваша песочница понравилась!

Я думаю вашу простыню можно свернуть вот в такой вид:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<select id="multiselector" name="prods[]" multiple="multiple" size="14">
			<option value="0">Выберите</option>
			<option value="19">Россия</option>
			<option value="20">Узбекистан</option>
			<option value="21">Казахстан</option>
			<option value="22">Азербайджан</option>
			<option value="23">Австралия</option>
			<option value="24">Австрия</option>
			<option value="25">Алжир</option>
			<option value="26">Ангилья</option>
			<option value="27">Англия</option>
			<option value="28">Ангола</option>
			<option value="29">Антигуа</option>
			<option value="30">Аргентина</option>
			<option value="31">Армения</option>
			<option value="32">Аруба</option>
		</select>
		<input type="button" onclick="window.select([19,20,21,25]);" value="Выбрать цены1" />
		<input type="button" onclick="window.select([22,23,24,29]);" value="Выбрать цены2" />
		<input type="button" onclick="window.select([26,27,28,30]);" value="Выбрать цены3" />
		<script>
	 		function select(values){
	 			var listbox = document.getElementById('multiselector');
	 			Array.prototype.forEach.call(listbox.options, function(option){
	 				option.selected = values.indexOf(Number(option.value)) >= 0;
	 			});
	 		}
		</script>
	</body>
</html>