jquery 如何使SELECT字段的选定选项与另一个选择字段Onchange相同?

aemubtdh  于 2023-11-17  发布在  jQuery
关注(0)|答案(3)|浏览(112)

因此,我有一个选择字段称为TRIP ID,其选项来自数据库。我还有另一个选择字段称为APS权重,其中有三个选项。STA,STB,STC -但这3个选项的值实际上是数字而不是STA,STB,STC。STA,STB和STC是什么,实际上是这些选择选项的InnerHTML。
我的问题是,我想选择一个TRIP ID的权利,然后onChange选择的选项APS重量成为前三个字母的值的TRIP ID。

<select name="tripid" id="tripid" style="width: 300px"
        onchange="document.getElementById('aps').value=tripid.value.slice(0,3)">

字符串
x1c 0d1x的数据
我认为我的代码不工作,因为。APS权重的选项的值实际上是数字而不是字符串。

8qgya5xd

8qgya5xd1#

希望这会有所帮助!

const setAps = () => {

  const select = document.getElementById("tripid");
  const selectedOption = select.options[select.selectedIndex];
  const selectedText = selectedOption.text;
  const aps = selectedText.slice(0, 3);

  const apsSlect = document.getElementById("aps");
  const textToSelect = aps;

  for (var i = 0; i < apsSlect.options.length; i++) {
    if (apsSlect.options[i].text === textToSelect) {
      apsSlect.selectedIndex = i;
      break;
    }
  }

}

个字符

ffvjumwh

ffvjumwh2#

您需要将$('#tripid')配置文件中所选选项的值与$('#aps')配置文件中选项的文本内容相匹配。
这里有两个解决方案(使用option:contains的JQuery和使用option.text的纯JavaScript)。

jQuery:

$("#tripid").change(function() {
  var val = this.value.slice(0, 3);
  $("#aps option:contains(" + val + ")").attr("selected", "selected");
});

个字符

纯JavaScript:

function update(value) {
  const dd = document.getElementById('aps');
  aps.selectedIndex = [...dd.options].findIndex(option => option.text === value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="tripid" id="tripid" style="width: 300px" onchange="update(this.value.slice(0,3))">
  <option>STA-1</option>
  <option selected="selected">STA-2</option>
  <option>STA-3</option>
  <option>STB</option>
  <option>STC-1</option>
  <option>STC-2</option>
</select>

<select id="aps">
  <option value=1>STA</option>
  <option value=2>STB</option>
  <option value=3>STC</option>
</select>

的字符串

slsn1g29

slsn1g293#

如果可以向选项添加数据属性,则可以在onChange方法中引用相同的属性。

<select id="aps">
<option value="0" data-value="STC">STC</option>
</select>

<select name="tripid" id="tripid" style="width: 300px"  onchange="document.getElementById('aps').options[document.getElementById('aps').selectedIndex].dataset.value=tripid.value.slice(0,3)">

字符串

相关问题