Question

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

我面临的问题是，当有多个Dropbox并且第一个Dropbox选择是其他'Other'而第二个Dropbox值是other时，生成的文本框放在第一个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);       
}
 }

jh javascript获取保管箱的名称，并用该ID替换“hiddenanothertextbox”的ID，使其唯一。我对这个问题有所了解，我认为是因为当用户没有点击第一个dropbox时，'hiddenanothertextbox'的id不会因第一个Dropbox而改变，当添加另一个Dropbox并且值被更改时，隐藏的另一个文本框为第一个dropox值的变化将它添加到第一个而不是第二个之前。我正在努力实现所需的结果。

更新JAVASCRIPt

function getData(title, i) {

var value = $(title).val();
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>';       
    $(title).after(str);         
}
else {

    $(title).nextUntil('#textboxid').remove();       
}
}

Answer 1

<强> Working Demo

使用此代码段。

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();       
  }
}

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"没有结尾"
使用 .after() 或 .append() 代替.html()

javascript动态添加文本框

1 个答案: