如何将不同的数据目标分配给不同的选项值，从而显示不同的模型

How do I assign different data-target to different option values so different models shows up?

本文关键字：选项 模型 显示 分配 数据 目标      更新时间：2023-09-26

我尝试了切换情况和if else语句来获得id为accept, reject, review的模型，但没有一个为我工作。我只是想确认一下我是否在逻辑和语法方面做错了什么。

<select class="input-sm form-control" id="pendingbulk">
   <option value="0">Bulk Actions</option>
   <option value="1">Accept</option>
   <option value="2">Reject</option>
   <option value="3">Report</option>
</select>
<button class="btn btn-sm btn-default" id="pendingapply" data-toggle="modal">Apply</button>
<script>
   $("#pendingapply").click(function() {
   var action = $('#pendingbulk').val();
   switch(parseInt(action)) {
   case 1:
     $(this).data("target") === "#accept";
     break;
   case 2:
     $(this).data("target") === "#reject";
     break;
   case 3:
     $(this).data("target") === "#report";
     break;
   default:
   });
</script>

或

<script>
   $("#pendingapply").click(function() {
   var action = $('#pendingbulk').val();
   if (action = 1) {
     $(this).data("target") === "#accept";
   } else if (action = 2) {
     $(this).data("target") === "#reject";
   } else if (action = 3) {
     $(this).data("target") === "#report";
   };
   });
</script>

试试这个:

$("#pendingapply").on('click', function() {
 var action = $('#pendingbulk').val();
 var $t=$(this);
 switch(parseInt(action)) {
 case 1:
   $t.attr("data-target","#accept" );
   break;
 case 2:
   $t.attr("data-target","#reject" );
   break;
 case 3:
   $t.attr("data-target","#report" );
   break;
 default:
 }
});


<select ng-model="pendingBulk" class="input-sm form-control" id="pendingbulk">
           <option value="0">Bulk Actions</option>
           <option value="1">Accept</option>
           <option value="2">Reject</option>
           <option value="3">Report</option>
        </select>
<button class="btn btn-sm btn-default" id="pendingapply" data-toggle="modal" data-target="#myModal">Apply</button>

在HTML正文中添加下面的div和三个嵌入表单，分别用于accept, reject和report:

<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">
        <form name="Form" class="form-horizontal" role="form" ng-controller="FormModalCtrl">
          <div class="form-group" ng-if="pendingBulk == 1">
            <label class="col-sm-2 control-label" for="level">Enter number</label>
            <div class="col-sm-10">
              <input type="number" id="level" class="form-control" ng-model="number" />
            </div>
          </div>
          <div class="form-group" ng-if="pendingBulk == 2">
            <label class="col-sm-2 control-label" for="level">Enter number</label>
            <div class="col-sm-10">
              <input type="number" id="level" class="form-control" ng-model="number" />
            </div>
          </div>
          <div class="form-group" ng-if="pendingBulk == 3">
            <label class="col-sm-2 control-label" for="level">Enter number</label>
            <div class="col-sm-10">
              <input type="number" id="level" class="form-control" ng-model="number" />
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

相关文章：