在同一迭代中从各种下拉列表中选择特定值时显示动态文本框

Question

我想从列表中选择一个特定的值时显示文本框。我能够这样做，但问题是我一直在循环循环以打印列表的下拉菜单。下拉菜单出现两次。使文本框同时显示在特定的值选择窗体上。

这是我的JSP代码

<s:iterator value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus">
  <s:hidden name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramID" />
  <tr>
    <td>
      <s:textfield name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1" label="%{#fsePay.paramName}"></s:textfield>
      <s:div id="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;">
        <s:select style="width: 150px;" id="select" list="schemPayoutTypeList" listKey="payoutType" listValue="payoutTypeVal" name="payoutTypeVal" onchange="showPayoutValue(this.selectedIndex)" />
      </s:div>
    </td>
  </tr>
</s:iterator>

我在struts的select标签上使用function showPayoutValue来显示文本框，但该文本框只出现一次。 我想从下拉列表中显示每个正确值选择的文本框。

JavaScript代码

function showPayoutValue(name){
  if(name=='1' )
       document.getElementById('div1').innerHTML='Capping: <input type="text" name="other" />';
  else 
       document.getElementById('div1').innerHTML='';
}

这是我正在执行的操作的屏幕截图。如果在“用法”文本框旁边选择了“带上限的百分比”值，则必须出现“ CApping”文本框。

有人可以帮我解决这个问题。

如果有其他建议，请提出其他建议。

我会很感激

Answer 1

几件事要注意

---

• 您的iterator将创建违反HTML规则的重复id 。 该id每页应该唯一 。
• 当您说document.getElementById ，它将始终获取第一个匹配element ，因此第一个div1将始终具有input 。
• 更换你的id与class并尝试匹配element这始终是closest的select元素。
• 您还将select元素放置在div1并更改其innerHTML 。 据我所知，这实际上也会删除select元素。 因此，请将其放在div1元素之外，可能放在单独的div

进行更改

---

JSP Changes

<s:iterator value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus">
  <s:hidden name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramID" />
  <tr>
    <td>
      <s:textfield name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1" label="%{#fsePay.paramName}"></s:textfield>
      <s:select style="width: 150px;" class="select" list="schemPayoutTypeList" listKey="payoutType" listValue="payoutTypeVal" name="payoutTypeVal" onchange="showPayoutValue(this)" /> 
      <!-- Pass element instead of value to identify which element has to targeted -->
      <!-- Keep this outside-->
      <s:div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;">
      <!--Change id to class and keep this empty-->
      </s:div>
    </td>
  </tr>
</s:iterator>

JS Changes

function showPayoutValue(ctrl) {
  var name = ctrl.value;//get the selected value
  var targetDiv=ctrl.parentElement.getElementsByClassName('div1')[0];
  //get Target div relating to its parent
  if (name == '1')
    targetDiv.innerHTML = 'Capping: <input type="text" name="other" />';
  else
    targetDiv.innerHTML = '';
  //You can also use conditional operators instead of if else here as below
  //targetDiv.innerHTML=name==1?'Capping: <input type="text" name="other" />':'';
}

DEMO

---

假设将按照DEMO说明生成html

 function showPayoutValue(ctrl) { var name = ctrl.value; var targetDiv=ctrl.parentElement.getElementsByClassName('div1')[0]; if (name == '1') targetDiv.innerHTML = 'Capping: <input type="text" name="other" />'; else targetDiv.innerHTML = ''; } 

 <div value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus"> <tr> <td> <input type="text" name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1"/> <select style="width: 150px;" class="select" name="payoutTypeVal" onchange="showPayoutValue(this)"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <!-- Pass element instead of value to identify which element has to targeted --> <!-- Keep this outside--> <div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;"> <!--Change id to class and keep this empty--> </div> </td> </tr> </div> <div value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus"> <tr> <td> <input type="text" name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1"/> <select style="width: 150px;" class="select" name="payoutTypeVal" onchange="showPayoutValue(this)"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <!-- Pass element instead of value to identify which element has to targeted --> <!-- Keep this outside--> <div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;"> <!--Change id to class and keep this empty--> </div> </td> </tr> </div> <div value="schemePayoutDTO.schemePayoutListFSE" var="fsePay" status="fsePayStatus"> <tr> <td> <input type="text" name="schemePayoutDTO.schemePayoutListFSE[%{#fsePayStatus.index}].paramValue1"/> <select style="width: 150px;" class="select" name="payoutTypeVal" onchange="showPayoutValue(this)"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> <!-- Pass element instead of value to identify which element has to targeted --> <!-- Keep this outside--> <div class="div1" cssStyle="margin-left:15cm; position: relative; bottom:-45px;"> <!--Change id to class and keep this empty--> </div> </td> </tr> </div>