Функция jQuery - Простой Выпадающий выбор с населением с выпадающим списком из другого списка

Здравствуйте, на первый взгляд может показаться, что это дубликат из другого сообщения здесь, в Stack Overflow, однако это не так. Я искал ответ на свой вопрос, и хотя я нашел несколько хороших фрагментов и использовал часть этой информации. Прямого ответа на мой вопрос не существует.Функция jQuery - Простой Выпадающий выбор с населением с выпадающим списком из другого списка

Простое примечание: Я также спросил об этом на других форумах. У меня такое чувство, что это может помочь многим разработчикам, поэтому, даже если я получу ответ в другом месте (или покажу это до этого), я отправлю его здесь.

То, что я хочу сделать, просто и отчетливо это:

Выберите опцию «первого списка (фрукты)».
Установите значение по умолчанию во втором раскрывающемся списке (Fruit_Types), основанном на выборе первого.

Оптимально все значения (в разделе Fruit_Types), связанные с первым значением выбора, будут заполнены во втором поле выбора.

Используйте одну небольшую функцию jQuery для этого и не ссылайтесь на jQuery в списке выбора. Другими словами, я должен учесть это на любой странице html с любыми двумя связанными списками (см. Код), и это должно сработать. JQuery должен быть полностью автономным.

Я был бы признателен за любую помощь в этом.

Пожалуйста, дайте мне знать, если кто-то может помочь мне заставить это работать правильно. Спасибо.

Большая часть работы уже выполнена (см. Код), однако я бы хотел, чтобы это работало все время, каждый раз. До сих пор она работает только при следующих условиях:

На странице Обновить/Load
один раз после загрузки страницы

Затем он перестает работать.

# Start Code

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Select one value based on the selection of another</title> 
 
<meta charset="utf-8"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script> 
 

 
jQuery(document).ready(function($) { 
 

 
jQuery("#Fruit") 
 
.change(function() { 
 
    var str = ""; 
 
    jQuery('option:selected', this).each(function() { 
 
    str += jQuery(this).text() + " "; 
 
    //Added with help from Chainat, Stack Overflow 
 
    jQuery("#Fruit_Types option").removeAttr('selected'); 
 
    jQuery("#Fruit_Types option:contains(" + str + ")").first().attr('selected', 'selected'); 
 
    }); 
 
    }) 
 
.change(); 
 

 
}); 
 

 
</script> 
 

 
</head> 
 
<body> 
 

 
<p>Select the top list and the second list should populate with the corresponding related values.</p> 
 

 
<select id="Fruit"> 
 
<option id="1">Apples</option> 
 
<option id="2">Oranges</option> 
 
</select> 
 

 
&nbsp; 
 

 
<select id="Fruit_Types"> 
 
<option id="3">Apples Green</option> 
 
<option id="4">Apples Red</option> 
 
<option id="5">Apples Granny Smith</option> 
 
<option id="6">Apples Fuji</option> 
 
<option id="7">Oranges California</option> 
 
<option id="8">Oranges Florida</option> 
 
<option id="9">Oranges Blood</option> 
 
<option id="10">Oranges Seedless</option> 
 
</select> 
 

 
</body> 
 
</html>

# End Код

источник

2016-11-17 rich5467

Добро пожаловать в переполнение стека!Похоже, вам нужно научиться использовать отладчик. Пожалуйста, помогите нам с некоторыми [дополнительными методами отладки] (https://ericlippert.com/2014/03/05/how-to-debug-small-programs/). Если у вас все еще есть проблемы после этого, пожалуйста, не забудьте вернуться с более подробной информацией. –

Первый номер, код продолжает добавлять атрибут для всех элементов, которые имеют на втором списке selected. Сначала их нужно удалить, также вы можете выбрать только один элемент во втором списке. Этот код будет решать, что

jQuery("#Fruit_Types option").removeAttr('selected'); 
jQuery("#Fruit_Types option:contains(" + str + ")").first().attr('selected', 'selected');

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

источник

2016-11-17 22:30:11 Chainat

Chanat, большое вам спасибо. Я ценю ваш ответ. Спасибо, он исправлен. Есть одна второстепенная вещь, и я отправлю код. Когда вы выбираете опцию из первого списка, а затем выбираете опцию из второго списка, «выбранный атрибут» не очищается. 1. Выберите опцию из первого списка. 2 Выберите опцию из второго списка. 3. Выберите опцию из первого списка, и она не работает. – rich5467

Chainat Wongtapan: перечисленные выше мелкие проблемы работоспособны. Огромное спасибо. Извините за неправильное написание вашего имени в вышеуказанном сообщении, я почему-то не смог изменить свой последний комментарий. И еще раз спасибо. – rich5467

Функция jQuery - Простой Выпадающий выбор с населением с выпадающим списком из другого списка

ответ

Смежные вопросы