使用自定义 jquery 下拉列表填充输入答案

【问题标题】：Populate input using custom jquery dropdown使用自定义 jquery 下拉列表填充输入
【发布时间】：2015-06-01 19:45:54
【问题描述】：

我目前有以下代码，除了我无法使用最接近的 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

【问题讨论】：

你能发布一个有效的 jsfiddle 吗？或者至少是 HTML。
@lmgonzalves 将 html 添加到问题中。

标签： javascript jquery forms input

【解决方案1】：

这里发生的情况是input.selected 不是选项的“祖先”，因此您不能为此使用closest。您应该先返回div.selectBox，然后再返回findinput.selected。那样：

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

演示：https://jsfiddle.net/lmgonzalves/yw7hyeh5/

在此处了解更多信息：https://api.jquery.com/closest/

【讨论】：