在選擇選項時動態顯示表單域

Question

這是我的小提琴： DEMO

我根據選項的選擇添加模板ID只讀字段。 1個用於SMS，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);

希望這可以幫助。

編輯：

回答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);

    });