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，然后find input.selected。那样：

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

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

点击此处了解详情：https://api.jquery.com/closest/

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

1 个答案: