Заполнение ввода с использованием пользовательского jquery dropdown

Question

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

Ниже моя текущая настройка:

$(document).ready(function() { 
    enableSelectBoxes(); 
}); 

function enableSelectBoxes(){ 
    $('div.selectBox').each(function(){ 
    $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html()); 
    $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value')); 

    $(this).children('span.selected,span.selectArrow').click(function(){ 
     if($(this).parent().children('div.selectOptions').css('display') == 'none'){ 
      $(this).parent().children('div.selectOptions').css('display','block'); 
     }else{ 
      $(this).parent().children('div.selectOptions').css('display','none'); 
     } 
    }); 

    $(this).find('span.selectOption').click(function(){ 
     $(this).parent().css('display','none'); 
     $(this).closest('div.selectBox').attr('value',$(this).attr('value')); 
     $(this).parent().siblings('span.selected').html($(this).html()); 
     $(this).closest("input.selected").attr('value',$(this).attr('value')); 
    }); 
});    
}//--> 

Ниже строка в приведенном выше коде, я думаю, должно работать:

$(this).closest("input.selected").attr('value',$(this).attr('value')); 

HTML

<div class="selectBox" value="Other"> 
    <div class="form-group field-reviews-category_id required has-error"> 
     <input type="text" id="reviews-category_id" class="selected" name="Reviews[category_id]"> 
<div class="help-block">Category cannot be blank.</div> 
</div>   <span class="selected">All Categories</span> 
<span class="selectArrow">▼</span> 
     <div class="selectOptions"> 
      <span class="selectOption" value="Other">All Categories</span> 
      <span class="selectOption" value="10">Accessories</span><span class="selectOption" value="11">Hoodies</span><span class="selectOption" value="4">Jackets</span><span class="selectOption" value="5">Jewellery</span><span class="selectOption" value="3">Sweatshirts</span><span class="selectOption" value="8">T Shirts</span><span class="selectOption" value="9">Trainers</span>   </div> 
    </div> 

jsfiddle

Answer 1

Что происходит, так это то, что input.selected не является «предком» опций, поэтому вы не можете использовать closest для этого. Сначала вы должны вернуться к div.selectBox, а затем findinput.selected. Таким образом:

$(this).closest('div.selectBox').find("input.selected").attr('value',$(this).attr('value')); 

DEMO: https://jsfiddle.net/lmgonzalves/yw7hyeh5/

Подробнее здесь: https://api.jquery.com/closest/