how to append json_encode data into drop down list

Question

I have two input field. I want to get value of 1st input field and sent it to database to get value of 2nd input field through php query. right now i am getting data in alert but I don't know how to put the values in second drop down.

I am getting data in alert. but how i can show data in #second-dropdown select tag.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#first-dropdown").off("change").on("change", function(){
        $.ajax({
             'url':"getUrl.php",
            'data':{id:$("#first-dropdown").val()},
            'method':'GET',
            'success':function(data){
                 alert(data);


            }


            })
        })

    });
</script>

<select id="first-dropdown">
 <option value="0">Select Product Line</option>
  <option value="1">Living</option>
  <option value="2">Kitchen</option>
  <option value="3s">Bathe & Utility</option>
  <option value="4">Furniture</option>
</select>
<select id="second-dropdown">

</select>

and my getUrl file is :

<?php
 $id = $_GET['id'];
     $query = mysql_query("select category_name from product_categories where Line_Code='$id'");
         while($data = mysql_fetch_assoc($query)){
             $values[] = array(
        'product_categories'=>$data['category_name'],

    );

         }
echo json_encode($values); 

?>

I want to show data in #second-dropdown. any one give me solution i am trying this since six hours.

In your success function, you want to loop through your data object and add options to your dropdown. This could help you : https://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery — Guillaume Georges, Dec 28 '17 at 10:37
kindly give your response data so I can suggest a code for you. its very easy — Negi Rox, Dec 28 '17 at 10:38
[**Don't use `mysql_*` functions in new code**](https://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [They are are deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [*prepared statements*](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli) - [this article](http://php.net/manual/en/mysqlinfo.api.choosing.php) will help you decide which. If you choose PDO, [here is a good tutorial](http://wiki.hashphp.org/PDO_Tutorial_for_MySQL_Developers). — Lawrence Cherone, Dec 28 '17 at 10:39
You should also read [How can I prevent SQL injection in PHP?](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) before going any further. — Lawrence Cherone, Dec 28 '17 at 10:41

Dhaval Purohit · Answer 1 · 2017-12-28T10:45:48.980

1

this is for parsing your data in json

var new_data = $.parseJSON(data);

or add/edit your ajax property

datatype:"json"

Try this in your success function.

$("#second-dropdown").html('');
//var new_data = $.parseJSON(data);
$.each(new_data, function (i, item) {
    $('#second-dropdown').append($('<option>', { 
        value: item.product_categories,
        text : item.product_categories 
    }));
});

edited Dec 28 '17 at 10:45

answered Dec 28 '17 at 10:40

Dhaval Purohit

1,270
10
28

score 0 · Accepted Answer · answered Dec 28 '17 at 10:46

Here is one more way to do this (without json):

<?php
 $id = $_GET['id'];
 $query = mysql_query("select category_name from product_categories where Line_Code='$id'");
 $retval="";
 while($data = mysql_fetch_assoc($query)){
    $retval=$retval."<option value='".$data['category_name']."'>".$data['category_name']."</option>";
 }
echo $retval; 
?>

and in your script:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#first-dropdown").off("change").on("change", function(){
        $.ajax({
             'url':"getUrl.php",
            'data':{id:$("#first-dropdown").val()},
            'method':'GET',
            'success':function(data){
                 $("#second-dropdown").html(data);
            }
            })
        })

    });
</script>

Thomas · Answer 3 · 2017-12-28T15:46:28.953

-1

Add this code in your success function to parse your JSON and create the options you want to add in your select element.

var options = JSON.parse(data);
for(var i in options){
  $("#second-dropdown").append("<option value='"+ options[i].product_categories +"'>"+ options[i].product_categories +"</option>");
}

JSON.parse transform your JSON string as an array that you can manipulate with JavaScript. The loop for create html options for the select then append these elements to the select.

edited Dec 28 '17 at 15:46

answered Dec 28 '17 at 10:39

Thomas

373
2
9

2

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit](https://stackoverflow.com/posts/48005915/edit) your answer to add some explanation, including the assumptions you’ve made. – Lawrence Cherone Dec 28 '17 at 10:46
it is working but the problem is when i change the values of #first-dropdown let suppose value 'A' to value 'B', it adds the options of 'B' with 'A' in #second-dropdown but i want it only show the values of 'B'. – Harris Khan Dec 28 '17 at 10:52
While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – yivi Dec 28 '17 at 12:08
@HarrisKhan your list of options is already filtered in PHP with the selected id. Isn't it ? Then you should have only the desired options. – Thomas Dec 28 '17 at 15:47

Negi Rox · Answer 4 · 2017-12-28T12:28:47.480

    $(document).ready(function(){
             $("#first-dropdown").off("change").on("change", function(){
               $.ajax({
                 'url':"getUrl.php",
                 'dataType':"json",
                 'data':{id:$("#first-dropdown").val()},
                 'method':'GET',
                 'success':function(data){
                   alert(data);
                   var results=data.d.results; //only assumption here this is a array of element with required option value. if it is not we need to print response data and check where all the value of options are stored.
                  var option='';
                  $("#second-dropdown").html('');
                  for(var i=0;i<results.length;i++)
                   {
                     option+='<option value="'+results[i]+'">'+results[i]+'</option>';
                   }
                    $("#second-dropdown").append(option);
                }
           })
      })

  });

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit](https://stackoverflow.com/posts/48005994/edit) your answer to add some explanation, including the assumptions you’ve made. — Lawrence Cherone, Dec 28 '17 at 10:45

how to append json_encode data into drop down list

4 Answers4