CODEWITHSUNDEEP
javascriptphpjqueryhtml
SA__
SA__

Reputation: 1862

Constructing select box according to the input in JQuery

Here in the code While clicking the first select it will send the request to route.php and get the result and it will display the output int he <div id="result">

But what i need is the both select box should be there in the first page itself and while selecting it should send result to the route.php and the value should be filled in the second select box (Until first select box is selected the second select should say please select above )

Here is my Code for Jquery post and request

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select  id="name">
  <option value="volvo">Volvo</option>
  <option value="audi" selected>Audi</option>
</select>
<div id='result' name="result">
</div>
<script>
$(document).ready(function(){
  $("#name").change(function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).html( data );
    });
  });
});
</script>

And the route.php is

<?php
$a = $_REQUEST['name'];
?>
<select  id="name">
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>
</select>

How can i do this ?

Update :

Suppose i follow the below code And i want to do it for n number of times. Is that possible ?

HTML :

<div id='result' name="result">
<select  id="result-name">
  <option value="" disabled>Please select above</option>
</select>
</div>
<script>
$(document).ready(function(){
  $("#name").change(function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).html( data );
    });
  });
});
</script>

route.php

<?php
$a = $_REQUEST['name'];
?>
<select  id="result-name">
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>
</select>

Upvotes: 1

Views: 208

Answers (3)

hashbrown
hashbrown

Reputation: 3516

Construct the select outside the AJAX call. That way your select will always be visible. 

<select id="sel"></select>

Then add the option values inside the AJAX return function.

function(data,status){
  $("#sel").append( '<option value="volvo" selected>' + data + '</option>' ); 
  $("#sel").append( '<option value="audi" >b</option>' );
  ...
}

Based on the Updated Question

You want whenever you change the value of a select in that DIV, it should bring in a new SELECT and this should continue to happen for n times. I attempted the same below but could not test it right-away. The idea is, you use on event delegation to keep track of any change in Select, if detected, you call the Ajax and append the result.

HTML

<div id="result">
<select><option>Please select</option></select>
</div>

jQUERY

<script>
  $("#result select").on ('change', function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).append ( data );
    });
  });
</script>

Upvotes: 1

Antony
Antony

Reputation: 171

You can try simple with select element itself,

<select id='result' name="result">
     <option>---Please select above value first---</option>
</select>

and route.php

<?php
$a = $_REQUEST['name'];
?>
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>

Upvotes: 1

RST
RST

Reputation: 3925

do something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select  id="name">
  <option value="volvo">Volvo</option>
  <option value="audi" selected>Audi</option>
</select>
<div id='result' name="result">
<select  id="result-name">
  <option value="" disabled>Please select above</option>
</select>
</div>
<script>
$(document).ready(function(){
  $("#name").change(function(){
    var name=$("#name").val();
    $.post("route.php",
    {
      name:name
    },
    function(data,status){
       $( "#result" ).html( data );
    });
  });
});
</script>

the other file can stay the same:

<?php
$a = $_REQUEST['name'];
?>
<select  id="result-name">
  <option value="volvo" selected><?php echo $a;?></option>
  <option value="audi" >b</option>
  <option value="audi" >v</option>
</select>

use either append or replace to get the code in the right spot. You can choose to just return the options, or the complete selection part

Upvotes: 0

Related Questions