Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   выбор пункта меню из выпадающего списка (https://javascript.ru/forum/dom-window/73141-vybor-punkta-menyu-iz-vypadayushhego-spiska.html)

денис77447327 24.03.2018 02:41

выбор пункта меню из выпадающего списка
 
<select id="make" name="make">
    <option value="0"> ---------------------- </option>
    <option value="Mercedec">Mercedec</option>
    <option value="Mazda">Mazda</option>
    <option value="Audi">Audi</option>                                       
    </select>

пишу в консоле
$("#make [value='Mazda']").attr("selected", "selected");
выбирается пункт мазда но на странице ничего не меняется это как будто просто фокус на пункте происходит. нежели когда я в ручную мышкой выбираю пункт происходит запрос на сервер и сервер возвращает список мазд. как реализовать

j0hnik 24.03.2018 07:45

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

добавить в код выше

рони 24.03.2018 09:08

денис77447327,
зачем attr?

laimas 24.03.2018 09:44

$('#make').val('Mazda')

денис77447327 24.03.2018 12:30

Цитата:

Сообщение от j0hnik (Сообщение 481336)
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

добавить в код выше

а если сайт не мой доступа нет как в расширение тамперманки вставить хтмл код

j0hnik 24.03.2018 13:57

добавить в "шапку" скрипта
Код:

// @require https://code.jquery.com/jquery-3.3.1.min.js
или писать нативный код
document.querySelector('#make').value = "Mazda";

денис77447327 24.03.2018 15:06

не работает. он выбирает этот пункт . но лишь визуально. запроса на сервер не происходит. и на странице ничего не меняется

j0hnik 24.03.2018 15:24

денис77447327,

это потому что событие change не происходит

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select id="make" name="make">
    <option value="0"> ---------------------- </option>
    <option value="Mercedec">Mercedec</option>
    <option value="Mazda">Mazda</option>
    <option value="Audi">Audi</option>                                       
  </select>
	<script>

document.querySelector('#make').addEventListener('change', ()=>alert('Наступило событие change'));
setTimeout(()=>document.querySelector('#make').value = 'Mazda', 1000);
	</script>
</body>
</html>


вот наглядный пример

j0hnik 24.03.2018 15:28

document.querySelector('#make').value = 'Mazda'; // меняем селект
document.querySelector('#make').dispatchEvent(new Event("change")); // вызываем событие

laimas 24.03.2018 15:30

Цитата:

Сообщение от денис77447327
он выбирает этот пункт . но лишь визуально. запроса на сервер не происходит.

Потому, что события при этом не возникает, и если отправка серверу по изменению в списке, то ее конечно не будет.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<select id="make" name="make">
    <option value="0"> ---------------------- </option>
    <option value="Mercedec">Mercedec</option>
    <option value="Mazda">Mazda</option>
    <option value="Audi">Audi</option>                                      
</select>

<script>
$('#make').change(function() {
     //обработка события   
     alert(this.value)
});
//изменение значения    
$('#make').val('Mazda').trigger('change');
</script>


Изменение свойств объекта таких как selected должно производится метод .prop() JQ, а не .attr()


Часовой пояс GMT +3, время: 14:20.