CODEWITHSUNDEEP
javascriptphpjqueryhtmllaravel-4
AngularAngularAngular
AngularAngularAngular

Reputation: 3769

JQuery Dynamic Option Select Issue

This is the continution of this Question

Here is the Code for Dynamic JQuery Option Select Generator.

First i will choose the Country, which i didn't include the code, it will return the CountryID which is passed to the controller, then RegionID, then CityID. IT works well until generating the CityID Option select Menu, while i move to the AreaID it didn't work.

What i am missing and how can i fix that ?

I can't able to generate the Menu after the third Second One.

Here is the HTML :

<div id='result' name="result">
<select  id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
<div id='resulta' name="resulta">
<select  id="name">
<option value="" disabled>Please select above</option>
</select>
</div>
<div id='resultb' name="resultb">
<select  id="name">
<option value="" disabled>Please select above</option>
</select>

Here is my Script :

<script>
  var ab = $.noConflict();
  ab(document).ready(function() {
    ab(document).on("change", "#CountryID", function() {
      var CountryID = ab("#CountryID").val();
      ab.post("globalregiongenerator", {
          CountryID: CountryID
        },
        function(data) {
          ab("#result").html(data);
        });
    });

  });
</script>


<script>
  var ac = $.noConflict();
  ac(document).ready(function() {
    ac(document).on("change", "#RegionName", function() {
      var RegionName = ac("#RegionName").val();
      ac.post("globalcitygenerator", {
          RegionName: RegionName
        },
        function(data) {
          ac("#resulta").html(data);
        });
    });
  });
</script>

<script>
  var ad = $.noConflict();
  ad(document).ready(function() {
    ad(document).on("change", "#CityName", function() {
      var CityName = ad("#CityName").val();
      ad.post("globalareagenerator", {
          CityName: CityName
        },
        function(data) {
          ad("#resultb").html(data);
        });
    });
  });
</script>

And here is the Server Side :

public function globalregiongenerator()
    {
    $CountryID = Input::get('CountryID');

    $result = DB::select("SELECT * FROM region where CountryID =$CountryID");
    echo "<select  id='RegionName' name='RegionName'> <option value='' id=''>Select the Area</option>"; 
    foreach ($result as $value) 
    {
    echo "<option value=".$value->RegionID.">".$value->RegionName."</option>";
    }
    echo "</select>";
    }

    public function globalcitygenerator()
    {
    $RegionID = Input::get('RegionName');
    $result = DB::select("SELECT * FROM city where RegionID =$RegionID");
    echo "<select  id='CityName' name='CityName'> <option value='' id=''>Select the Area</option>"; 
    foreach ($result as $value) 
    {
    echo "<option value=".$value->CityID.">".$value->CityName."</option>";
    }
    echo "</select>";
    }

    public function globalareagenerator()
    {
    $CityID = Input::get('CityName');
    $result = DB::select("SELECT * FROM area where CityID =$CityID");
    echo "<select  id='CityName' name='CityName'> <option value='' id=''>Select the Area</option>"; 
    foreach ($result as $value) 
    {
    echo "<option value=".$value->CityID.">".$value->CityName."</option>";
    }
    echo "</select>";
    }

Note :

Uncaught TypeError: undefined is not a function

This is the error i got in console

Upvotes: 0

Views: 150

Answers (1)

artm
artm

Reputation: 8584

Change 

echo "<option value=".$value->CityID.">".$value->CityName."</option>";

to

echo "<option value='".$value->CityID."'>".$value->CityName."</option>";

Same with other echos. You're generating

<option value=united states>United States</option>

but it needs to be

<option value='united states'>United States</option>

Update:

Change them to 

echo "<option value=\"".$value->CityID."\">".$value->CityName."</option>";

Upvotes: 1

Related Questions