Question

我有一个带有值和相关文本的下拉列表：

echo '<option value="'.$row['company_id'].'">'.$row['company_name'].'</option>';

最终，所选选项的输出将逐行放入表中。每行都有一个编辑按钮，用于编辑该特定行并选择新的下拉选项。我正在尝试使用JavaScript来选择文本，当他们点击编辑按钮时，当前设置的选项将是默认选项。

因此，例如，如果行显示company_name为：ABC Company，当他们点击编辑按钮时，下拉列表将填充该选项。由于值和文本不同，我需要根据文本选择下拉选项。到目前为止，我已尝试过这两个选项而没有运气。

获取行文字：

var d = document.getElementById("itable").rows[id].cells[3].innerText;

我已尝试以下内容传回行的文本，并按文字选择下拉列表。

document.querySelector('#editinsurancepolicymodal select[name=editicompanydropdown]').value = d;

此选项仅填充下拉列表，但未选择任何选项。

document.querySelector('#editinsurancepolicymodal').find('option[text="InsuranceB"]').val;

此选项选择下拉列表中的第一个选项，但不会根据“文本”的内容进行更改。

提前感谢您的帮助。

Answer 1

一种方法是迭代选项元素，选择与行中文本具有相同文本的元素，并取消选择所有其他元素。这在下面的片段中说明（我已经插入了3秒的超时，这样您就可以看到最初选择的选项（Two）被更改为JavaScript代码中带有“Three”文本的选项。

window.setTimeout(function () {
  var sampleWord = "Three";
	var options = document.querySelectorAll("option");

  for (var i = 0; i < options.length; i++) {
    var option = options[i];
    if (option.innerText === sampleWord) {
      option.selected = true;
    } else {
      option.selected = false;
    }
  }
}, 3000);

<select id="selector">
  <option id="option-1" value="1">One</option>
  <option id="option-2" value="2" selected>Two</option>
  <option id="option-3" value="3">Three</option>
  <option id="option-4" value="4">Four</option>
</select>

或者，您可以将公司的ID存储为行上的data-attr属性。例如（在PHP中）：

echo "<td data-attr-company-id=".$row['company_id'].">".$row['company_name']."</td>"

然后，您可以从表格行中读取属性，并查询与您的属性值具有相同值的选项。

Answer 2

var options = document.querySelectorAll("option");

这将从页面中选择所有选项。如果要获取特定下拉列表的选项，请使用以下命令：

var options = document.querySelector('#specificform select[name=specific_drop_down_in_the_specific_form]');

要根据文本选择选项而不是值，请使用此循环：

for (var i=0; i<options.length; i++){
        var option = options[i];
        if (option.innerText === d){
            option.selected = true;
        }
    }

根据关联文本选择下拉选项

2 个答案: