CODEWITHSUNDEEP
phpmysql
PeeJay
PeeJay

Reputation: 323

How to Display Option Name in Dropdown using Javascript

I have two dropdowns which values are populated from MySQL. The second dropdown values depends on the first dropdown option.

Anyways, the code is working. Now using my code I am posting hospital_id to another php. But I want to display hospital_name as text on the dropdown as well, but as of now I am only able to display the hospital_id.

Please see me code below and suggest me a solution:

$query = "SELECT bp_id,bp_name FROM mfb_billing";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("bp_id" => $row['bp_id'], "val" => $row['bp_name']);
  }

  $query = "SELECT bp_id, hospital_id, hospital_name FROM mfb_hospital";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['bp_id']][] = array("bp_id" => $row['bp_id'], "val" => $row['hospital_id']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);

This is the script:

<script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
      ?>
      function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 1; i < categories.length; i++){
          select.options[i] = new Option(categories[i].val,categories[i].bp_id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].hosp);
        }
      }
    </script>

This is my form:

<body onload='loadCategories()'>
   <form id="reportvalue" action="testpj2.php" method="post">

    <select id='categoriesSelect'>
        <option value="1">Select Billing Provider</option>
    </select>

    <select name='hospitalname[]' id='subcatsSelect' multiple='multiple'>
        <option value="all">Select Billing Provider</option>
    </select>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<?php
//$a = $_REQUEST['hospitalname[]'];
//echo $a;
?>
   <input type="submit" name="Submit" value="Submit">
  </form>

Upvotes: 2

Views: 503

Answers (2)

Nandan Bhat
Nandan Bhat

Reputation: 1563

HTML

 <select id="someId"></select>

Javascript

 document.getElementById('someId').innerHTML="
 <option value='value1'>"+option1+"</option>
 <option value='value2'>"+option2+"</option>
 <option value='value3'>"+option3+"</option>";

Update:

for dynamic data from SQL query,

Try putting these codes after query execution. replace $row['value'] and $row['option'] with the respected dynamic values.

 echo"<script type='text/javascript'> var str = '' </script>";
 while($row = $result->fetch_assoc())
 {
     echo"<script type='text/javascript'>
    str = str + '<option value='+".$row['value']."+'>'+".$row['option']."+'</option>   
    </script>";
 }
 echo"<script type='text/javascript'>
     document.getElementById('someId').innerHTML = str
    </script>";

Upvotes: 1

Neelesh
Neelesh

Reputation: 193

if you are getting the hospital id then it is very easy to populate the selected value by getting it through from mysql

 $query = "SELECT hospital_id, hospital_name FROM mfb_hospital where hospital_id = '$_post['hospital_id']'";
  $result = $db->query($query);
$res = mysql_fetch_array($result)

In your select option value code put this code

<option value="your ids here will populate" <?php if($hospital_array['hospital_id']==$res['hospital_id']) echo "selected=selected" ?>>Your hospital name will display here which you selected</option>

Upvotes: 0

Related Questions