Question

我正在创建一个切换按钮，我想绑定一个select事件。我已经创建了按钮，但我不知道如何将值绑定到它并使其像选择按钮一样工作。有人可以给我一些线索或与之相关的一些例子，以便我可以尝试一下并学习一些东西吗？

我的要求是我将select事件绑定到它并使其像选择按钮一样工作。

这就是我创建按钮的方式：

<div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-6">Tax Value</label>
                    <div class="col-sm-6">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></button>
                            </div>
                            <input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-12" id="invoice_request_tax_value_label">Tax Value - Nil</label>
                </div>
            </div>
        </div>

Answer 1

尝试使用knockout.js。这就是我用来做你想要的那种动作（动态绑定值）

foreach-binding是您问题的解决方案。

也可以使用options-binding，您只能使用select标记。

看看你是否可以使用淘汰赛。

Answer 2

创建你的observable然后按照幻灯片/ toggle绑定它们然后你可以调整这个例子，这样当你在下拉列表中切换选择值变成yourdropdown.selectedText（javascript）时，你会发现它看起来像注释代码但实际上是有条件的ko中的陈述

<tbody data-bind="foreach: yourObservableArray">
    <tr data-bind="attr: { 'id': description }">
    <td style="border-bottom: 1px solid #e0e0e0;">
      <label data-bind="text: description"></label>
     </td>
   <td class="td-actions" style="border-bottom: 1px solid #e0e0e0;">
  <input type="text" class="input-mini" data-bind="value: amount">
 <input type="hidden" class="input-mini" data-bind="attr: { 'id': 'DC_' + description }, value: Totalcost">
  </td>
     <td class="toggle-soft">
    <!-- ko if: description == 'Data' -->
   <div id="slider" class="toggle floatright" onclick="toggleCOS()"></div>
                                                                <input type="checkbox" disabled="disabled" class="checkbx" id="cos_data" style="display: none;">
  </div>
     <!-- /ko -->
      <!-- ko if: description != 'Data' -->
       Cost
       <!-- /ko -->
           </td>
                </tr>
           </tbody>

将值动态绑定到jquery中的切换按钮

2 个答案: