如何在 js 中更新带有相应文本框的组合框？

Question

我正在尝试更新组合框。如果用户在文本框中输入 url。基于 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>

我的输入计数基于 urls 而增加，如果用户粘贴到第二个文本框仅填充第二个 select 标签，则子索引也会更改更新方式....

Answer 1

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

<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,2,3,4,5,6,7,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>

如何在 js 中更新带有相应文本框的组合框？

how to update combo box with respective textbox in js?

html

javascript

css

dojo