Question

这是我的小提琴：DEMO

我根据选项的选择添加模板ID只读字段。 1个用于短信，2个用于电子邮件等。

由于有添加新类别的规定，如何动态地将模板ID添加到新添加的选项中？

//Adding Template ID based on option
$('#categoryevent').on('click', function() {
  $('.actionConfig').empty();
  var z = $("#categoryevent option:selected").text();  
  if (z == 'sms') {
    var smsConfig = '<div class=form-group><label class="col-sm-2 control-label"for=templateId>Template ID: </label><div class=col-sm-8><input class=form-control id=templateId name=templateId value="1" readonly="readonly"></div></div>';
    $('.actionConfig').append(smsConfig);
  }
});

Answer 1

欢迎来到SO，你可以做这样的事情，

当您添加新类别维护计数器并将其添加为新添加选项的值时，现在将选项的值设置为Template-Id 1,2,3。

现在保持其他相同的内容只需从选项值获取模板ID。

这样的事，

var opval = get option value here..
     var smsConfig = '<div class=form-group><label class="col-sm-2 control-label"for=templateId>Template ID: </label><div class=col-sm-8><input class=form-control id=templateId name=templateId value="+opval+" readonly="readonly"></div></div>';
        $('.actionConfig').append(smsConfig);

希望这有帮助。

编辑：

answer jsfiddle

Answer 2

您应该检查value属性，而不是检查选项的文本表示。由于您尚未为您硬编码的选项添加值属性，因此您也必须执行此操作，即更改：

<option>SMS</option>

到

<option value="0">SMS</option>

或者，如果您不想使用标准value属性（例如，因为您想避免默认行为），则可以转到<option data-selectionId="1">SMS</option>。显然会增加您在选择中的每个选项的ID。

现在，如果您创建一个新选项，则必须设置此数据：

  var val = $("#new-option-event").val().trim();
  var opt = '<option value="'+ globalCounterVariable +'">' + val + '</option>';
  globalCounterVariable += 1; 

  $('#categoryevent').append(opt);
  $('#categoryevent').val(val);
  $('#new-option-event').val('');

您必须定义一个全局可靠的（实际上超出.addevent处理程序的范围就足够了），您最初必须将其设置为3（硬编码选项的数量）。

现在你可以这样做：

$('#categoryevent').on('change', function() {
      var selection = $(this).val(); //this is reference to the changed element, i.e. the select with Id 'categoryeveny'. 

      var html = '<div class="form-group"><label class="col-sm-2 control-label" for="templateId">Template ID: </label><div class="col-sm-8"><input class="form-control" id="templateId" name="templateId" readonly="readonly"></div></div>';

      $(html).find("input").val(selection);

      $(".actionConfig").empty();
      $('.actionConfig').append(html);
});

请注意我是如何删除所有if子句的需要的，因为每个分支都执行相同的逻辑。只需参数化您想要注入的任何内容，这就是您所需要的。

如果要为每个选择显示不同的值（因此数据不同于1,2,3，...等），则必须在创建新选项的输入中创建一个选项，或者change事件中的硬编码通用逻辑，您可以根据选择的值决定显示哪些内容。

Answer 3

以下是答案小提琴：DEMOanswer

$('#categoryevent').on("click", function(ev) {
        //  alert(ev.target.selectedIndex);
        var value = ev.target.selectedIndex;
        $('.actionConfig').empty();
        var z = $("#categoryevent option:selected").text();

        z = z.toLowerCase();

        var templateId = '<div class=form-group><label class="col-sm-2 control-label"for=templateId>Template ID: </label><div class=col-sm-8><input class=form-control id=templateId value="' + value + '" name=templateId readonly="readonly"></div></div>';
        $('.actionConfig').append(templateId);

    });

在选项选择上动态显示表单字段

3 个答案: