Not able to bind dropdownlist values coming from json values from databases in jquery

I want to bind control values based on the data from the database table. All the controls like textbox are getting bind except the dropdownlist values are not getting bind.

Below is my code

function BindDataTableToJSONProject(strVal) {

            var ProjectData = JSON.parse(strVal);

            var getJSONValue = ProjectData.Table[0];
            if (getJSONValue.PROJECT_MANAGER_NAME != "" && getJSONValue.PROJECT_MANAGER_NAME != null) {
                $('#ContentPlaceHolder1_ddlProjMan').val(getJSONValue.PROJECT_MANAGER_NAME);
            }
        }
    </script>
<select name="ctl00$ContentPlaceHolder1$ddlProjMan" id="ContentPlaceHolder1_ddlProjMan" class="form-control">
    <option value="0">--Select--</option>
    <option value="1">ABC</option>
    <option value="2">PQR</option>
    <option value="3">XYZ</option>
</select>

Below is my json data for the same.

{ID: 6, MST_ID: 107, PROJECT_NO: "R4G-25-APD-210", CR_NO: "R4G-25-APD-ACR-1212", APPLICATION_NAME: "Workflow for VSAT Application", PROJECT_MANAGER_NAME: "XYZ",  …}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

One way would be looping through options inside select tag and then checking if the .text() is equal to PROJECT_MANAGER_NAME if yes then add selected true to that option.

Demo Code :

var getJSONValue = {
  "ID": 6,
  "MST_ID": 107,
  "PROJECT_NO": "R4G-25-APD-210",
  "CR_NO": "R4G-25-APD-ACR-1212",
  "APPLICATION_NAME": "Workflow for VSAT Application",
  "PROJECT_MANAGER_NAME": "XYZ"
}
BindDataTableToJSONProject();

function BindDataTableToJSONProject() {
  if (getJSONValue.PROJECT_MANAGER_NAME != "" && getJSONValue.PROJECT_MANAGER_NAME != null) {
    //loop through option
    $('#ContentPlaceHolder1_ddlProjMan option').each(function() {
      //get text of option check if equal to pmn
      if ($(this).text() == getJSONValue.PROJECT_MANAGER_NAME) {
        $(this).prop("selected", true) //set slectd true
      }
    })

  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ctl00$ContentPlaceHolder1$ddlProjMan" id="ContentPlaceHolder1_ddlProjMan" class="form-control">
  <option value="0">--Select--</option>
  <option value="1">ABC</option>
  <option value="2">PQR</option>
  <option value="3">XYZ</option>
</select>

Method 2

You try to set value (that is 3) <option value="3">XYZ</option>

but you select the parameter of the text getJSONValue.PROJECT_MANAGER_NAME == "XYZ"


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x