Попытка получить определенные значения из выпадающего меню, сделанного на заказ

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

Это мое перо.

http://codepen.io/RobbyT15/pen/LIKsJ

выберите

<body> 
    <div class="select"> 
     <div class="arrow-down"></div> 
     <div class="option-menu"> 
      <div class="option">Hello</div> 
      <div class="option">Goodbye</div> 
     </div> 
    </div> 

    <div class="select"> 
     <div class="arrow-down"></div> 
     <div class="option-menu"> 
      <div class="option active">A</div> 
      <div class="option">B</div> 
      <div class="option">C</div> 
     </div> 
    </div> 
</body>

сценарий

$(document).ready(function(){ 
    var select = $(".select"); 
    $(select).on("click", function(){ 
     $(this).find(".option-menu").each(function(){ 
      $(this).toggle(); 
     }) 

     $(".option").on("click", function(){ 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
      $(select).children("p").remove(); 
      var option = $(this).text(); 
      console.log(option); 
      $(select).prepend("<p>" +option +"<p>"); 
     }) 
    }) 
})

источник

2014-10-15 Anonymous

При нажатии на какой-то вариант йо являются Отсносящийся переменной select

var select = $ (". Select");

Это вызывает все элементы с классом select, вы несекретно, чтобы уточнить селектор. Попробуйте добавить эту строку:

$(select).on("click", function(){ 
    select = $(this); //ADD THIS 
    $(this).find(".option-menu").each(function(){ 
    $(this).toggle(); 
})

Проверить демонстрационная http://codepen.io/anon/pen/GaemF

источник

2014-10-15 20:07:17 DaniP

Awesomeness. Огромное спасибо. –

Вы должны использовать специальный контейнер Div

<div class="container1"> 
    <div class="select"> 
     <div class="arrow-down"></div> 
     <div class="option-menu"> 
      <div class="option">Hello</div> 
      <div class="option">Goodbye</div> 
     </div> 
    </div> 
</div> 

var select = $(".container1 .select"); 
    $(select).on("click", function(){ 
     $(this).find(".option-menu").each(function(){ 
      $(this).toggle(); 
     }) 

     $(".container1 .option").on("click", function(){ 
      $(".active").removeClass("active"); 
      $(this).addClass("active"); 
      $(select).children("p").remove(); 
      var option = $(this).text(); 
      console.log(option); 
      $(select).prepend("<p>" +option +"<p>"); 
     }) 
    })

Ваша проблема вы используете одни и те же классы для 2-х элементов. Если бы я был вами, я пишу этот код как плагин jquery.

// С плагином вы можете создать свой код с одной строкой кода. $ ('# container'). CreateSelectMenu();

источник

2014-10-15 20:08:55

Я хотел бы сделать это плагином, но у меня нет ни малейшего понятия о том, как. Возможно, я должен это исследовать. –

Попытка получить определенные значения из выпадающего меню, сделанного на заказ

ответ

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