javascript - 如何让下拉菜单选项显示值的串联

Question

我正在尝试构建一个零件编号创建器类型引擎，用户可以在其中根据给定的下拉菜单值以及手动输入文本来创建自己的零件编号。我希望它获取用户输入的值并将其编译成没有空格的零件号。我似乎陷入了调用函数来执行此操作的 JavaScript 部分......

//I want to use a function like this - if there is a value 
function FillSeries(f) {
  if(f.completepart.checked == true) {
    f.ser_sel.value = f.finishedser_sel.value; //finishedser_sel would be the place holder for the value of ser_sel in the concantenated part
    f.cap_sel.value = f.finishedcap_sel.value; //finishedcap_sel would be the place holder for the value of cap_sel in the concantenated part
  }
}

<form action="#" method="post">
<fieldset>
<table id="tbl_sel" class="tables" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="fst">SERIES</th>
<th>CAP</th>
</tr>
</thead>
<tbody>
<tr>
<td><select id="ser_sel" class="txt">
<option value=""></option>
<option value="620">620</option>
<option value="621">621</option>
</select></td>
<td><input id="cap_sel" class="txt hd" maxlength="3" type="text" /></td>
</tr>

</tbody>
</table>
</fieldset>
</form>
<!--not sure where to put this - inside or outside the form -->
<input type="checkbox" name="completepart" onclick="FillSeries(this.form)">
<em>Check this box if you are done creating a part number.</em>
<br><br>
<!-- I want the part number to pull the fields together into one line - all together with no spacing -->
<b>Finished Part Number</b>
<br><br>
<input class="txt" id="finishedser_sel">
<input class="txt" id="finishedcap_sel">

Answer 1

如果您希望 this.form 指向表单，则需要将这些字段移至表单中。请注意，在您的代码中，您将 select 的值设置为文本框的值，该值看起来是向后的。在此代码片段中，我颠倒了顺序。

//I want to use a function like this - if there is a value 
function FillSeries(f) {
  if (f.completepart.checked == true) {
    f.finishedser_sel.value = f.ser_sel.value; //finishedser_sel would be the place holder for the value of ser_sel in the concantenated part
    f.finishedcap_sel.value = f.cap_sel.value; //finishedcap_sel would be the place holder for the value of cap_sel in the concantenated part
  }
}

<form action="#" method="post">
  <fieldset>
    <table id="tbl_sel" class="tables" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th class="fst">SERIES</th>
          <th>CAP</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <select id="ser_sel" class="txt">
              <option value=""></option>
              <option value="620">620</option>
              <option value="621">621</option>
            </select>
          </td>
          <td>
            <input id="cap_sel" class="txt hd" maxlength="3" type="text" />
          </td>
        </tr>

      </tbody>
    </table>
  </fieldset>
  <!--not sure where to put this - inside or outside the form -->
  <input type="checkbox" name="completepart" onclick="FillSeries(this.form)">
  <em>Check this box if you are done creating a part number.</em>
  <br>
  <br>
  <!-- I want the part number to pull the fields together into one line - all together with no spacing -->
  <b>Finished Part Number</b>
  <span id="wholepart"></span>
  <br>
  <br>
  <input class="txt" id="finishedser_sel">
  <input class="txt" id="finishedcap_sel">
</form>