Bootstrap Multi-select не работает в раскрывающемся списке POST?

У меня есть следующие предпосылки для инициализации множественного выбора.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap core and multiselect JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

Похоже, он не работает должным образом, как показано здесь: введите здесь описание изображения

Теперь то, что у меня есть в качестве второго раскрывающегося списка «Имя», представляет собой раскрывающийся список типа AJAX, основанный на значении первого раскрывающегося списка «Выбрать интеграцию».

<tr>
<td>Select Integration: </td> <td>
    <select name="new_src_type_id" id="integration-list" class="form-control" onChange="getState(this.value);">
            <option value="">Select Integration</option>
        <?php
            foreach ($integration_id as $index_integ => $integ_id) {
                echo "<option value='$integ_id'>".$integration[$index_integ]." </option>";
            }
        ?>
    </select>
</td>
</tr>
<tr>
<td>Name: (The changes made will be applied to the ff:)</td> <td>
    <select name="element[]" id="element-list" class="form-control" multiple="multiple">
</select>
</td>
</tr>

вызвано:

<script>
function getState(val) {
    $.ajax({
    type: "POST",
    url: "get_element.php",
    data:'src_type_id='+val,
    success: function(data){
        $("#element-list").html(data);
    }
    });
}
</script>

Я хотел бы иметь возможность инициализировать второй раскрывающийся список «Имя» как раскрывающийся список с множественным выбором, но он не работает так, как это показано в документах. http://davidstutz.github.io/bootstrap-multiselect/

И это, кажется, не работает, когда я называю это так:

<script>
$(document).ready(function() { 
        $('#element-list').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-multiselect
person Odinovsky    schedule 17.04.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Иногда вы не можете инициализировать элемент после загрузки с помощью ajax, вам нужно снова инициализировать его после завершения загрузки ajax.

<script>
    function getState(val) {
        $.ajax({
        type: "POST",
        url: "get_element.php",
        data:'src_type_id='+val,
        success: function(data){
            $("#element-list").html(data);
            $('#element-list').multiselect({ includeSelectAllOption: true });
        }
        });
    }
</script>
person Rhega    schedule 17.04.2016
comment
Спасибо за ответ. Это, кажется, не работает. - person Odinovsky; 18.04.2016
comment
Это работает после обнаружения другого экземпляра jquery и bootstrap js в моем footer.php (с этого момента нужно смотреть эти страницы :)).. Мне просто нужно добавить $('#element-list').multiselect(destroy); к вашему сценарию, чтобы уничтожить предыдущий экземпляр списка. Спасибо!! - person Odinovsky; 18.04.2016

arrow_upward
1
arrow_downward

Вам нужно инициализировать свой множественный выбор, как показано ниже (при условии, что ваш вызов ajax возвращает значения правильно, как вы хотите).

function getState(val) {
    $.ajax({
    type: "POST",
    url: "get_element.php",
    data:'src_type_id='+val,
    success: function(data){
        $("#element-list").append($('<option></option>').val(data).html(data)).multiselect("destroy").multiselect({
            includeSelectAllOption: true,          //For SelectAll Option
            enableFiltering: true,                 //For Search Option
         });
    }
}

Я написал

.multiselect("destroy")

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

person Prakash Thete    schedule 17.04.2016
comment
Спасибо за ответ. Это, кажется, делает большой кусок варианта. См. imgur.com/wlBrqLe. - person Odinovsky; 18.04.2016
comment
Можете ли вы сделать JS Fiddle кода, который вы пробовали (с фиктивными данными)? Так что другие могут работать над этим, чтобы решить проблему. - person Prakash Thete; 18.04.2016
comment
Из изображения не очень понятно, что вызывает у вас проблемы. Можете ли вы проверить данные, которые вы получаете, и проверить, нуждаются ли они в какой-либо обработке, прежде чем добавлять их в раскрывающийся список. - person Prakash Thete; 18.04.2016
comment
Также проверьте, включили ли вы таблицу стилей bootstrap multiselect или нет? Как то похоже дело в этом. - person Prakash Thete; 18.04.2016