如何使用动态ID在HTML下拉列表中选择文本

Question

I am trying to pull values from a JSON string on my web page. I have used dynamic ID in my select drop-down. Now I want to create an IF loop such that it compares if the selected value in the drop down is equal to "some text" then it should print the result in another field. Here I want the final value in place of "I WANT VALUE HERE". Here is my piece of code.

<div class="row">
<span class="input-field col wide20">
     <input readonly="readonly" type="text" value="" class="form-control" id="<?php echo $key; ?>_name_Broker" placeholder="">
</span>
     <span class="input-field col wide20">
          <!--input type="text" class="form-control" placeholder=""-->
     <select style="width: 100%;" name="mapped_Broker" class="form-control mappedBroker" data-id="<?php echo $key; ?>" id="<?php echo $key; ?>_select_Broker">
     <option value="">--Select--</option>
         <?php foreach ($my_array_data['BrokerName'] as $data2){
             for ($i = 0; $i < count($data2['Entityname']); $i++) { ?>
             <option value="<?php echo $data2['Senetence']; ?>"><?php echo $data2['Entityname']; ?></option>
         <?php }
        }
        ?>
       </select>
<input style="display:none;" type="text" id="<?php echo $key; ?>_edit_Broker" name="Edited_Sub_Broker">
</span>
<span class="input-field col wide20">
<button type="submit" class="btn btn-dark-grey">Broker</button>
</span>
<span class="input-field col wide10">
<span class="icon-edit" id="span_edit_Broker"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64" id="Layer_1" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
<g>
<path d="M55.736 13.636l-4.368-4.362c-0.451-0.451-1.044-0.677-1.636-0.677 -0.592 0-1.184 0.225-1.635 0.676l-3.494 3.484 7.639 7.626 3.494-3.483C56.639 15.998 56.639 14.535 55.736 13.636z"/>
<polygon points="21.922 35.396 29.562 43.023 50.607 22.017 42.967 14.39 "/>
<polygon points="20.273 37.028 18.642 46.28 27.913 44.654 "/>
<path d="M41.393 50.403H12.587V21.597h20.329l5.01-5H10.82c-1.779 0-3.234 1.455-3.234 3.234v32.339c0 1.779 1.455 3.234 3.234 3.234h32.339c1.779 0 3.234-1.455 3.234-3.234V29.049l-5 4.991V50.403z"/>
</g>
</svg> </span>
</span>

<span class="input-field col wide20">
<input readonly="readonly" type="text" class="form-control" placeholder="" 
name="brokersuggestion" value="<?php echo $jsonArrData['brokersuggestion'] ?
>">
</span>

<span class="input-field col wide10">
 <input readonly="readonly" type="text" value="" class="form-control" id="<?php echo $key; ?>_conf_Broker" placeholder="I WANT VALUE HERE"
 </span>
  </div>

EDIT: My JSON looks like this.

"BrokerName": [
    {
      "Entityname": "AmWINS",
      "EntityType": "BrokerName",
      "FileType": "EMAIL",
      "OrignalFileName": "FW  American Hospitality Association  Inc  - GL Sub- Eff 7 27.msg",
      "OrignalFile": "E:\\emails\\80 Submission\u0027s Email\\FW  American Hospitality Association  Inc  - GL Sub- Eff 7 27.msg",
      "ExtlFileName": "MSG_AmericanHospitalityAssociation.txt",
      "ExtFilePath": "E:\\80 txt\\AmericanHospitalityAssociationInc-GLSub-Eff727\\MSG_AmericanHospitalityAssociation.txt",
      "Senetence": "o quote . Thank you Jessica Tonkinson Vice President AmWINS",
      "Confidence": 0.1
    },

Answer 1

here's a working fiddle that might help guide you in the correct direction.

Here it is listening to the change event on the selection and comparing its value to whatever you want.

<select class="selection">
   <option value="one">one</option>
   <option value="two">two</option>
   <option value="three">three</option>
 </select>

Note that i added a class to your selection to make sure to only trigger when that specific selection changes its value

$(".selection").change((e)=>{
 if(e.target.value == "two"){
     console.log("tada");
   }else{
     console.log("wrong");
  }
})

you said you needed the code on the page itself, so just wrap it inside a <script> tag and you should be good.

EDIT: i don't want to give you a whole bunch of code, since i think you can figure that out from there, but here's a little bit of help:

 $(".selection").change((e)=>{
    let yourEntityName = e.target.val; // <--- the selection 
 })

this is how you get the string of your chosen entity. now, this needs to be compared to your json object, to get whatever corresponding string you want, right?

well, we need to search over the entries in the BrokerName array to find the correct entry (assuming there are more than one, right?) I will just assume that your array from json is named BrokerNameArr

 let correspondingStuffWeNeed = "";
 for( let i = 0; i < BrokerNameArr.Length; i++){
    if(BrokerNameArr[i]["Entityname"] == yourEntityName){
       correspondingStuffWeNeed = BrokerNameArr[i]["whateverYouNeed"];
       break; //since we got what we wanted
    }
 } 

and this stuff above gets packed inside the change event (or inside a method and then called, your choice) and then you have the value you need.

Answer 2

I hope this is what you are looking for. I think your are confused with how you are going to track that dynamic Id in your <select> element. So wrap it inside a div with an ID and refer from that.

 $('#optionContainer > select').change(function(){ //Get the selected item from dropdown var selectedContent = $(this).find('option:selected').html(); //Sample JSON string. I included "{" and "}" to the front and back of the string to make it object. var jsonContent = '{"BrokerName": [{"Entityname":"AmWINS","EntityType": "BrokerName","FileType": "EMAIL","OrignalFileName": "AA","OrignalFile": "BB","ExtlFileName":"CC","ExtFilePath": "DD","Senetence": "EE","Confidence": 0.1}, {"Entityname":"FmWINS","EntityType": "BrokerName","FileType": "EMAIL","OrignalFileName": "AA","OrignalFile": "BB","ExtlFileName":"CC","ExtFilePath": "DD","Senetence": "EE","Confidence": 0.5}]}' ; //Make your JSON string and object var stringContent = JSON.parse(jsonContent) //Compare entity name with selected item for(i=0; i<stringContent.BrokerName.length; i++ ){ if (stringContent.BrokerName[i].Entityname.indexOf(selectedContent) >= 0){ alert("Confidence " + stringContent.BrokerName[i].Confidence) } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="optionContainer"> <select> <option value="0">AmWINS</option> <option value="1">FmWINS</option> </select> 

Answer 3

PHP :

Read that json array and check that drop down value is there in JSON like below:

$decode_data = json_decode($json);
foreach($decode_data as $key=>$value){
if($value == $mapped_Broker){
$result = "place holder";
}
}

Then use that variable in placeholder like below:

<span class="input-field col wide10">
<input readonly="readonly" type="text" name="conf_Broker" value="" class="form-control" id="<?php echo $key; ?>_conf_Broker" placeholder="<?php echo $result;?>"
</span>

Note: This will work if you have the dropdown value when page load

Jquery :

You can use this code even if you have dynamic id.

$(function(){
var json_value={"0":"aaa","1":"bbb","2":"ccc","3":"ddd"};
var arr = $.map(o, function(el) { return el; })
$('[name=mapped_Broker]').on('change',function(){
if($.inArray($(this).text(), arr){
$('[name=conf_Broker]').attr('placeholder','your_content');
}
});
});