Question

我想基于几个按钮（引导按钮）的切换（可以打开和关闭）来更改选择列表中的值（通过JQuery从JSON对象填充）

到目前为止，我有类似的事情：

<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary" id="Toggle1">Toggle1</button>
<button type="button" class="btn btn-primary" id="Toggle2">Toggle2</button>
<button type="button" class="btn btn-primary" id="Toggle3">Toggel3</button>
</div>

<script>
$.post("/getResults", {"inputParam" : param}, function (data) {
var options = $("#selectlist");
$.each(data, function () { options.append($('<option />').text(this.Name).val(this.id)); });

$(function () {
   $('#toggle1').on('click', function () {
        rePopSelect("toggle1-" + $(this).hasClass('active'));
     });

$('#toggle2').on('click', function () {
        rePopSelect("toggle2-" + $(this).hasClass('active'));
     });

$('#toggle3').on('click', function () {
        rePopSelect("toggle2-" + $(this).hasClass('active'));
     });
</script>

我坚持写函数rePopSelect()似乎最好将$.post的结果存储在一个对象中然后使用切换的结果来重建整个选择列表基于切换的一些过滤条件，但我不知道如何做到这一点。

JSON的一个例子如下：

[{"id":1,"Name":"Blah-Blah","Type":"H"},{"id":2,"Name":"Blah-Blah2","Type":"C"}]

基本上toggle1，应该只选择H，toggle2，应该只选择C，toggle3应该只选择S（在这个例子中......这意味着什么）

请注意，可以选择切换组合，因此如果选择了toggle1和toggle2，则在此示例中将是整个集合。

Answer 1

修改了我的回答。没有经过测试，但应该让你接近。

类似的东西：

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary" id="Toggle1" add="H">Toggle1</button>
  <button type="button" class="btn btn-primary" id="Toggle2" add="C">Toggle2</button>
  <button type="button" class="btn btn-primary" id="Toggle3" add="S">Toggel3</button>
</div>

var options;
$.post("/getResults", {"inputParam" : param}, function (data) {
   options = data;
});


$('.btn').click(function(){

   if ($(this).attr("on")=="true") {
       $(this).attr("on","false");
   } else {
       $(this).attr("on","true");
   }

   $("#selectID option").remove();

   $('button[on=true]').each(function(){
       addkey = $(this).attr("add");
       options.each(function(){
           if (this.Type == addkey) {
              $('#selectID').append('<option value="'+this.id+'">'+this.Name+'</option>');
           }
       });


   });
});

根据按钮切换更改选择列表中的值

1 个答案: