如何用js中的相应文本框更新组合框？

编程问答 2022-07-13

问题描述

我正在尝试更新组合框。如果用户在文本框中输入网址。基于url，我正在获取一些信息并将该数据推入组合框

代码：

<body>
<div id="updatecmb">
<div class="Urlwithflds"><input type="text" class="Geturl" placeholder="Layer URL" onchange="Getfields()"><button class="rmvbtn">-</button><br><label for="FeaLayerflds">Select Fields</label><select class="Flds" name="FeaLayerflds"></select> </div>
<div class="Urlwithflds"><input type="text" class="Geturl" placeholder="Layer URL" onchange="Getfields()"><button class="rmvbtn">-</button><br><label for="FeaLayerflds">Select Fields</label><select class="Flds" name="FeaLayerflds"></select> </div>
<div class="Urlwithflds"><input type="text" class="Geturl" placeholder="Layer URL" onchange="Getfields()"><button class="rmvbtn">-</button><br><label for="FeaLayerflds">Select Fields</label><select class="Flds" name="FeaLayerflds"></select> </div>
</div>
<script>
function Getfields(events){
   var txturl=events.target.value;
    // i am fetching the details from url and it gives array
    cmbdata=[1,2,3,4,5,6,7,8];
    selele=events.currentTarget.children[0].children[4]
    cmbdata.forEach(function(entry) {
    selele.add(new Option(entry));
    }
</script>
<body>

我的输入计数基于url增加，如果用户粘贴在第二个文本框上的用户仅填充第二个选择标记，则子索引也更改了更新方式。

解决方法

在HTML中，以getFields作为参数传递函数this，就像这样

<div id="updatecmb">
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
</div>

然后在函数getFields中执行

function getfields(target){
  const txturl = target.value;
  // assuming we fetched some data from given url as an array
  cmbdata = [1,2,3,4,5,6,7,8];

  // find the element 'select' within the parent element
  selele = target.parentElement.querySelector('select');

  // append each fetched data as new option
  cmbdata.forEach(function(entry) {
    selele.add(new Option(entry));
  });
}

完成！

尝试

function getfields(target){
  const txturl = target.value;
  // assuming we fetched some data from given url as an array
  cmbdata = [1,8];

  selele = target.parentElement.querySelector('select');

  cmbdata.forEach(function(entry) {
    selele.add(new Option(entry));
  });
}
body {
  background: white;
  color: #323232;

  margin: 0;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: Helvetica neue,roboto;
}
<div id="updatecmb">
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
  <div class="Urlwithflds">
    <input type="text" class="Geturl" placeholder="Layer URL" onchange="getfields(this)">
    <button class="rmvbtn">-</button>
    <br>
    <label for="FeaLayerflds">Select Fields</label>
    <select class="Flds" name="FeaLayerflds">
    </select>
  </div>
</div>

dojodojodojodojohtmljavascript