Question

我试图用Select2进行AJAX搜索调用。输入数据取决于选择字段上方显示的所选单选按钮。

每当我点击选择框时，应该读取其上方单选按钮的选定值并更改choice变量。但是，当我单击选择框时，它仅更改choice变量一次。如果我再次点击，它就不会再改变了。为什么会发生这种情况，我该如何解决？谢谢！

<div class="group">
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partner">
        {{Form::radio('partnersupplier', 'partner', true, array('class' => 'mdl-radio__button partnersupplier', 'id' => 'partner'))}}
        <span class="mdl-radio__label">Partner </span>
    </label>
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect margin-radio" for="supplier">
        {{Form::radio('partnersupplier', 'supplier', false, array('class' => 'mdl-radio__button partnersupplier', 'id' => 'supplier'))}}
        <span class="mdl-radio__label">Leverancier </span>
    </label>
    <div class="form-group" >
        <label for="x">label<br></label>

        <select id="x" name="x" class="searchselect searchselectstyle partnersupplierselect">
        </select>

    </div>
</div>

这是我的JS

var choice = 'partner';

    $('.partnersupplierselect').on('click', function(){
        var group = $(this).parent().parent();
        choice = group.find('.partnersupplier:radio:checked').val();
        console.log(choice);

        group.find('.partnersupplierselect').select2({
            ajax: {
                dataType: "json",
                type: "POST",
                data: function (params) {
                    return {
                        term: params.term,
                        '_token': token,
                        'choice': choice
                    };

                  // the rest is just the Select2 initialization
                  // console.log only gives once the value when I click it, and then never again

点击后点击选择框：

<div class="form-group">
    <label for="yearlypartnersuppliermaintainance">Kies partner / leverancier jaarlijks onderhoud<br></label>
    <select id="yearlypartnersuppliermaintainance" name="yearlypartnersuppliermaintainance" class="searchselect searchselectstyle partnersupplierselect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 250px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-yearlypartnersuppliermaintainance-container" aria-owns="select2-yearlypartnersuppliermaintainance-results"><span class="select2-selection__rendered" id="select2-yearlypartnersuppliermaintainance-container"></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>

Answer 1

尝试将您的js更改为：

var choice = 'partner';

$(document).on('click', '.partnersupplierselect', function(){
    var group = $(this).parent().parent();
    choice = group.find('.partnersupplier:radio:checked').val();
    console.log(choice);

    group.find('.partnersupplierselect').select2({
        ajax: {
            dataType: "json",
            type: "POST",
            data: function (params) {
                return {
                    term: params.term,
                    '_token': token,
                    'choice': choice
                };

当动态生成时，DOM更改在jQuery中不是事件链接，因此您使用$(document).on('event','element',function(){...});来触发元素上的事件...

获取子元素jQuery的单选按钮值

1 个答案: