javascript - 如何获取OPTION的TEXT值

Question

在这种情况下，只有主下拉列表会更改，其他下拉列表的值将根据它自动更改(因此用户不会更改它们)我正在尝试使用 PHP 获取选项的文本值与 $_POST。但只有当我手动更改另一个下拉列表时才能得到它。我尝试使用trigger()方法，但无法获取选项文本值。知道为什么代码无法工作。谢谢。

function setDropDown() {
  var index_name =
    document.getElementsByName('ForceSelection')[0].selectedIndex;
  var others = document.querySelectorAll('.secondary');
  for (var i = 0; i < others.length; i++) {
    others[i].selectedIndex = index_name;
  }
}
<!-- try to get the option text value and pass it to input field-->
<!-- Then in the php code use $_POST[] to retrieve the input value-->
function setTextField(ddl) {
  document.getElementById('make_text').value = ddl.options[ddl.selectedIndex].text;
}

$("select").trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
  <select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
  <b>Other dropdown 1</b>:
  <select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
    </select></div>
<input id="make_text" type="hidden" name="make_text" value="" />


<div> <b>Other dropdown 2</b>:
  <select class='secondary' id="Qualifications2" name="Qualifications2">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
</select>
</form>

PHP 代码

   $value =$_POST['make_text'];

Answer 1

Html 元素 <select> onchange 不会因程序化更改而触发，您需要使用

自己触发它

$(".secondary").trigger("change");

或按 ID

$("#Qualifications").trigger("change");

问题是你隐藏的<input>从来没有值(value)。如果您删除代码中隐藏的它，您可以检查它。

因此，当您发布值时，make_text 上的值是空字符串。因此，如果您在 for 之后触发触发器循环然后它就会工作。

function setDropDown() {

var index_name = document.getElementsByName('ForceSelection')[0].selectedIndex;

var others = document.querySelectorAll('.secondary');

for (var i = 0; i < others.length; i++) {

	others[i].selectedIndex = index_name;

}

$("#Qualifications").trigger("change");

}

function setTextField(ddl) {

document.getElementById('make_text').value = ddl.value;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
  <select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
  <b>Other dropdown 1</b>:
  <select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
    </select></div>
<input id="make_text"  name="make_text" value="" />


<div> <b>Other dropdown 2</b>:
  <select class='secondary' id="Qualifications2" name="Qualifications2">
    <option value="select">select</option>
    <option value="treatmentid1">treatmentname1</option>
    <option value="treatmentid2">treatmentname2</option>
</select>
</form>