Javascript-форум - Блокировка определённых option у select

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Блокировка определённых option у select (https://javascript.ru/forum/jquery/33832-blokirovka-opredeljonnykh-option-u-select.html)

Блокировка определённых option у select

В форме есть input и select.
Нужно, чтоб когда в myinput введёно определённое слово, например Казахстан то в myselect блокировались определённые option, например option 1 и option 4 становились disabled.
Как это реализовать с помощью jQuery? Догадываюсь только, что с помощью .attr("disabled", "disabled");

<form id="myform">

	<input id="myinput">

	<select id="myselect">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
	</select>

</form>

<form id="myform">
	<input id="myinput">

	<select id="myselect">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
	</select>

</form>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('#myselect option[value="2"], #myselect option[value="4"]').attr('disabled', 'disabled');
</script>

cmd
Свет пролили, благодарю )
Только в вашем примере options изначально заблокированы, а нужно, чтоб после ввода определённого слова.

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

Понял, извиняюсь.
Думаю должно быть как-то так, но не заработало:

<form id="myform">

    <input id="myinput">

    <select id="myselect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

</form>

$('#myinput [value="Кахазстан"]').change(function(){
	$('#myselect option[value="2"], #myselect option[value="4"]').attr('disabled', 'disabled');
	$('#myselect option[value="1"]').attr('selected', 'true');
});

только вместо .change конечно должно быть другое событие, определяющее соответствие введённого текста..

.keyup .keypress

.keyup и .keypress проверяют нажатие конкретной клавиши или их сочетания. Получается, нужно проверить нажатые подряд (но не одновременно) нужные символы.

$('#myinput').on('change keyup', function() {

Изначально я хотел получить значение input value по атрибуту .change, и если value соответствует, тогда событие.
Это было бы проще, т.к. нужно задавать не коды символов, а просто нужное слово

$('#myinput').on('keyup', function() {
 alert($(this).val());
});

.keyup или .change

С помощью .keyup я реализовал проверку количества введённых символов, отличный атрибут.
В данном же случае я решил задачу таким образом:

$('#myinput').change(function(){
	if($(this).val() != ''){
		if($(this).val().search('Ключевое слово') == 0){
			Выполнение следующих функций
		}else{
			Не выполнять следующие функции
		}
	}
});

Спасибо всем. Познакомили меня с keyup поближе, который я тут же применил, и подтолкнули в решению :)

Тогда и $.trim() до кучи надо юзать

Вопрос в продолжение.
1. В myinput вводится кодовое слово.
2. Если совпадение найдено, выполняется действие - в myselect выбирается option 3 (добавляется атрибут selected), а option 2 и 4 блокирует (добавляется атрибут disabled). Всё отлично.
3. Но (! отступление) оба эти элемента находятся в форме myform которая отправляется методом $_POST, и здесь через PHP сервер проверяет правильно ли заполнены поля, и, если неправильно, сервер возвращает форму с сообщением о незаполненных полях.

В случае с input или textarea я просто могу вернуть value с помощью PHP вот так:

<input name="myinput" id="myinput" value='<?php if($_POST["myinput"]) { echo $_POST["myinput"]; } ?>'>

Но с элементом select такое не проходит..
Записать состояние myselect конечно можно и с помощью jQuery cookies:

$(document).ready(function(){
	$('#myselect').change(function(){$.cookie('myselect', $(this).attr('value'));});
});

Но в в этом случае состояние записывается, только если произошёл именно выбор .change (нажатие на этом элементе myselect).
То есть я не могу применить этот метод, если состояние myselect изменено с помощью ввода ключевого слова в myinput, т.к. здесь не было фактического нажатия (выбора) на элементе myselect.
Возможно я что-то упустил, и вместо .change для записи куки нужно использовать что-то другое.. :(

Конечно, как вариант решения - валидировать форму на правильность заполненных полей можно и через jQuery, но в самой форме есть captcha, и тогда получается проблема с сессиями, т.к. без перезагрузки страницы не открывается новая сессия..

Вопрос: Как сохранить состояние myselect (какие option выбраны, а какие блокированы), если состояние этого элемента было изменено без нажатия на него (с помощью другого элемента), после проверки формы и перезагрузки страницы?
Есть мысли по этому поводу?

Напомню структуру формы:

<form name="myform" id="myform">
    <input name="myinput" id="myinput">
    <select name="myselect" id="myselect">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

1. Можно просто отправлять форму ajax'ом и тогда myselect у тебя останется таким каким он был перед отправкой формы.
2. запоминать value у option's в куки, те что нашлись в куках, те значит не disabled, а остальные disabled или наоборот

ОлегА, Спасибо, попробую вторым способом, правда пока не знаю как записывать куки именно для option.
Здесь похожую задачу обсуждают, постараюсь разобраться.

Не хочется на ajax форму валидировать, т.к. для капчи не будет открываться новая сессия, т.е. сама капча будет обновляться, но в текущей сессии, что не есть феншуй как мне кажется.

Ну сессию можно обновлять через тот же аякс, как вариант.

а насчет как сохранять просто все

$('#myselect option').each(function(i){
    if(! $(this).attr('disabled')){
         options = { path: "/", expires: 10 };

         $.cookie('myselect_value['+i+']', $(this).value(), options);
    } 
});

сам не проверял данный код, но как то так вроде

Цитата:

Сообщение от ОлегА (Сообщение 220775)

а насчет как сохранять просто все

$('#myselect option').each(function(i){
    if(! $(this).attr('disabled')){
         options = { path: "/", expires: 10 };

         $.cookie('myselect_value['+i+']', $(this).value(), options);
    } 
});

сам не проверял данный код, но как то так вроде

Попробовал, ВСЕ option становятся заблокированными после перезагрузки страницы..

ну если бы я протестил, добил конечно, ну да ладно, рад помочь)

ОлегА буду рад если поможете ))
Попробовал реализовать запись состояния блокированного option вот так:

$(document).ready(function(){
	//записываем куки для конкретного option
	$('#myselect').change(function(){$.cookie('myselect-option1', $('#myselect option').eq(1).attr('disabled'));}); 
	//читаем куки для этого option
	$('#myselect option').eq(1).attr('disabled', $.cookie('myselect-option'));
});

То есть если option 1 блокируется, это состояние записывается в куки и после перезагрузки страницы он остаётся блокированным.
Но (!) если после этого снять блокировку фактически, то разблокированное состояние в куки не записывается, и этот option и дальше остаётся заблокированным..
Думаю, происходит это потому, что если элемент разблокирован, то у него пропадает атрибут disabled="disabled", а значит в куки новое состоние разблокированное не записывается. Как быть?

дело в том что вы

$('#myselect option').eq(1).attr('disabled', $.cookie('myselect-option'));

тут и включаете блокировку option, т.к атрибуту без разницы будет он disabled=true или disabled=false - это все равно означает блокировку делайте что то типа этого -

if($.cookie('myselect-option') === true){
$('#myselect option').eq(1).attr('disabled','disabled');
}

ааа! спасибо, понял )