Question

我使用了SelectBoxIt插件来显示我的应用程序中的选择框。

我有两个选择框，如果我更改第一个选择框中的值，另一个应该自动更新（它应该自动触发）。

对于两个选择框，值都是动态传递的，我在代码

下面使用

$('.ember-select').selectBoxIt({
            theme: "default",
            autoWidth: false,
            triggerChangeCombined: true
        });

我用过

$('.ember-select').selectBoxIt({
            native: true
        });

它会触发但是slectbox其他属性如＆＃34; theme＆＃34;，＆＃34; autoWidth＆＃34;没有呈现。

Answer 1

好的，您可以查看以下 Demo 和代码：

以下是您的示例 HTML

<div class='formArea'>
    <label>Mode:</label><br/>
    <select id="modes" name="modes">
        <option disabled selected>
            -- Choose a Mode --
         </option>
         <option>Vehicle</option>
         <option>Fleet</option>
         <option>Trailers</option>
     </select><br/>
    <label>Options:</label><br/>
    <select id="optionss" name="optionss">
        <option disabled selected>
            -- Options --
        </option>

     </select><br/>
</div>

以下是 JS：

var vehicles = ['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5']; //add all your vehicle options here
var fleet = ['fleet 1', 'fleet 2', 'fleet 3', 'fleet 4', 'fleet 5']; //add all your fleet options here
var trailers = ['trailer 1', 'trailer 2', 'trailer 3', 'trailer 4', 'trailer 5']; //add all your trailers options here

var optionss =  [{name: "Vehicles", clubs: vehicles},
                 {name: "Fleet", clubs: fleet},
                 {name: "Trailers", clubs: trailers}
                ];


$(function() {
    var selectedmode = $('#modes option:selected').text()
    var optionmenu = $('#optionss');
    for (var i = 0; i < optionss.length; i++) {
         if (selectedmode === optionss[i].name) {
              $.each(optionss, function(val, obj) {
                  optionmenu.append($('<option></option>').val(val).html(obj.clubs));
              });
         }
    }
});

$('#modes').on('change',function(){
    var mode=$(this).find(":selected").text();
    $('#optionss').find('option').remove();
    switch(mode)
    {
        case 'Vehicles':
            $.each(vehicles, function(key, value) {   
                    $('#optionss')
                    .append($("<option></option>")
                    .text(value)); 
            });
            break;

        case 'Fleet':
            $.each(fleet, function(key, value) {   
                    $('#optionss')
                    .append($("<option></option>")
                    .text(value)); 
            });
            break;
        case 'Trailers':
            $.each(trailers, function(key, value) {   
                    $('#optionss')
                    .append($("<option></option>")
                    .text(value)); 
            });
            break;
        default:break;        
      }
});

如何使用SelectBoxIt jquery插件触发本机选择框

1 个答案: