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>

Answer 2

单击checkBox时，会发送到您的函数（this.form）。

（this）是你的输入，所以this.form不存在。

“message”：“TypeError：f为null”，

Answer 3

使用事件侦听器观察输入并选择要更改的框，然后将值分配给其他输入元素，如下所示：

＆＃13;

var part1 = "";
var part2 = "";
 
var selectBox = document.getElementById('ser_sel');
selectBox.addEventListener('change', function (event) {
    part1 = event.target.value;
    document.getElementById('finishedser_sel').value = event.target.value;
    
})
var inputBox = document.getElementById('cap_sel');
inputBox.addEventListener('keyup', function (event) {
    part2 = event.target.value;
    document.getElementById('finishedcap_sel').value = event.target.value;
    
})
function FillSeries(f) {
  document.getElementById('allTogetherNow').value = (part1 + '-' + part2);
  
}

＆＃13;

<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">

<br /><br />
Finished Part# <br />
<input class="txt" id="allTogetherNow">

＆＃13;

如何使用下拉菜单选项显示值的连接

3 个答案: