Измените содержимое DIV на основе выбора из списка

У меня есть список ссылок, таких как:Измените содержимое DIV на основе выбора из списка

<li><a href="#">Alabama</a></li> 
<li><a href="#">Alaska</a></li> 
<li><a href="#">Arizona</a></li> 
<li><a href="#">Arkansas</a></li> 
<li><a href="#">California</a></li>

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

<div>Select a state from the list</div>

Желаемый результат: Выбор Алабаму из списка отображается в главном DIV список графств в штате Алабама.

Текущий результат: Выбор Алабамы из списка не обновляет главный div.

Как я могу это сделать? JavaScript? JQuery? JSFiddle?

Я ищу что-то, может быть, похожее на это: Change the content of a div based on selection from dropdown menu

Но у меня не было никакой удачи, получая, что для работы со списком.

источник

2016-12-09 Levi J

вы можете разместить код, который вы пробовали? Вы попробовали этот пример, который вы опубликовали? – Adjit

Да, я дал ответ rybo111 попробовать, но мне было трудно преобразовать его для работы с выбором списка. В частности, 3-я строка в его JQuery о опции: выбрана. Я не знаком с JQuery. –

Были ли у вас какие-либо ошибки/правильное включение jQuery на вашу страницу? – Adjit

Попробуйте добавить прослушиватель событий, чтобы слушать щелчки на неупорядоченный элемент списка.

var states = document.getElementById('states'); 
 
var main = document.getElementById('main'); 
 

 
states.addEventListener('click', function(e) { 
 
    e.preventDefault(); // don't navigate to <a> tag href 
 
    if (e.target.tagName === 'A') { 
 
    main.textContent = e.target.textContent; 
 
    } 
 
});

<ul id="states"> 
 
    <li><a href="#">Alabama</a></li> 
 
    <li><a href="#">Alaska</a></li> 
 
    <li><a href="#">Arizona</a></li> 
 
    <li><a href="#">Arkansas</a></li> 
 
    <li><a href="#">California</a></li> 
 
</ul> 
 

 

 
<div id="main">Main</div>

Обратите внимание, что мы можем добавить один click event listener к родителю всех элементов списка, а затем мы проверяем, чтобы убедиться, что щелчок был на A тег, сравнивая tagName. Затем мы можем скопировать textContent от элемента с щелчком на главный элемент.

источник

2016-12-09 22:09:22 styfle

Похоже, это может сработать. Можете ли вы предоставить несколько дополнительных данных, если (e.target.tagName === 'A')? –

Не могу заставить это работать. не уверен, что мне не хватает. –

@levijoraan Я объяснил ниже фрагмент кода. В браузере работает «Выполнять фрагмент кода»? – styfle

Попробуйте это:

<ul id="list"> 
<li><a href="#">Alabama</a></li> 
<li><a href="#">Alaska</a></li> 
<li><a href="#">Arizona</a></li> 
<li><a href="#">Arkansas</a></li> 
<li><a href="#">California</a></li> 
</ul> 
<div id="selection"></div>

JQuery:

$(document).ready(function() { 
    $('#list a').on('click', function(e) { 
     e.preventDefault(); 
     $('#selection').text($(this).text()); 
    }); 
});

источник

2016-12-09 22:08:51

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

Если это внешний HTML страница, которую вы могли так что-то вроде

HTML

<div id="div2"><div>

JQuery

$('#div1').select(), 
$('#div2').load("statesName.html");

источник

2016-12-09 22:11:36

Измените содержимое DIV на основе выбора из списка

ответ

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