C# javascript动态添加文本框

我试图根据dropbox的选择动态添加一个文本框。当用户选择“其他”时，将生成一个文本框，要求他们解释其他。用户可以动态添加多个dropbox，如果dropbox中选择了其他值，则会生成多个文本框。每个生成的dropbox都有一个唯一的名称，该名称将被读取并放置在动态生成的textbox的id中

我面临的问题是，如果有多个dropbox，并且第一个dropbox选择是其他的，而第二个dropbox值是其他的，则生成的文本框将放在第一个dropbox的前面，应该放在与其相关的dropbox的前面

dropbox的html代码如下所示：

<div id="container">

    <label id="rightlabel"for="dropbox1"></label>
    <span>
      <select id="frequency" onclick="getData(this, name)" name="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]"></select>
      <span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]"></span>
    </span>
<div id="hiddenothertexbox"></div>
</div>

Javascript如下所示：

function getData(title, i) {

var value = title.options[title.selectedIndex].value; 
var y = i.replace(/-/g, '')
$('#hiddenother').attr('id', y);

if (value == 'Other') {

    str = '<label id="leftlabel">if other, please specify</label><span><input id="textboxid" class="text-box single-line" type="text" value="" name="textbox ></input></span>';       
    $('#'+y).html(str);         
}
else {
    str = '';
    $('#'+y).html(str);       
}
 }

函数getData（标题，i）{ var value=title.options[title.selectedIndex].value； 变量y=i.替换（/-/g，“”） $（'hiddenother'）.attr（'id'，y）； 如果（值==‘其他’）{ str='如果其他，请指定'； $（标题）。在（str）之后； } 否则{ $（title）.nextUntil（'#textboxid'）.remove（）； } }

使用此代码段

var flag = 0;
function getData(title, i) {

var value = $(title).val();

  var y = i.replace(/-/g, '');
  $('#hiddenother').attr('id', y);

  if (value == 'Other' ) {
      if(flag == 0){
          flag=1;
          str = '<label id="leftlabel">if other, please specify</label><span><input id="textboxid" class="text-box single-line" type="text" value="" name="textbox"></input></span>';       
          $(title).after(str); 
      }        
  }
  else {
    flag=0;
    $(title).nextUntil('#textboxid').remove();       
  }
}

var标志=0；
函数getData（标题，i）{
var值=$（title.val（）；
变量y=i.替换（/-/g，）；
$（'hiddenother'）.attr（'id'，y）；
如果（值==‘其他’）{
如果（标志==0）{
flag=1；
str='如果其他，请指定'；
$（标题）。在（str）之后；
}        
}
否则{
flag=0；
$（title）.nextUntil（'#textboxid'）.remove（）；
}
}

Html:

<select id="frequency" onchange="getData(this, name)" name="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]">

---

更改：

• var value=

  $（title）.val（）提供正确的值

• 使用

  onchange=“getData（this，name）”

  代替

  onclick=“…”

• 在变量

  str

  中：

  name=“textbox”

  没有结尾

  “

• 使用或而不是

  .html（）

---

请发布一个JSFIDLE。我已经发布了html标记。谢谢。这是可行的，但是如果重复选择了other，它会一直追加。如果没有选择other，那么other文本框不会消失。当我添加“&&&$（'input'）。Length复制此行

如果（value=='other'&&$（'input'））.length也通过在js的开头添加flag=0来修复它
<select id="frequency" onchange="getData(this, name)" name="dropbox[4fb103e3-06e7-4c88-8836-73b855968478]">