如何获取OPTION的TEXT值

In this case, only primary dropdown will change, other dropdowns' values will change automatically according to it (so users wont be changing them) I'm trying to get the Option's TEXT value using PHP with $_POST. But i can only get it when i manually changed the other dropdown . I have tried to use the trigger() method, but it fails to get the option text value. Any idea why the code fails to work. Thank you.

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 Code

   $value =$_POST['make_text'];

</div>

Html element <select> onchange doesn't fire for programmatic changes, you need to fire it yourself with

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

or by Id

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

The problem is that your hidden <input> never had the value. if you remove the hidden it on your code you can check it.

So when you POSTED the values the value on make_text was empty string. So if you fire the trigger after the for loop then it will work.

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>

</div>

I have to say that I don't see any need to use a hidden input text to POST data to PHP because you can just post the value of the <select> and retrieve it in PHP like this $force = $_POST["ForceSelection"];.

Otherwise, if you want to continue what you started, you can change your setDropDown() function to this :

function setDropDown() {
  #Get the selected value of the ForceSelection select : 
  var index_name = $('#ForceSelection').val();
  #Change the value of the other secondary select : 
  $(".secondary").each(function( index ) {
      $(this).val(index_name).change();//This will change the value and trigger the change event.
  });

}