CODEWITHSUNDEEP
phpjqueryjson
geomo
geomo

Reputation: 141

JSON result in to select option

In my HTML page i have 2 select. When i change the value into the first select the second select must be change is option value.

Error in console :

Uncaught ReferenceError: Invalid left-hand side in assignment

If i add console.log(result) i see the object in console.

JS code

<script type="text/javascript">

function changeoption() {
    $.getJSON('users.php', {nameUser:$('#nameUser').val()}, function(result) {
    var select = $('#email');
    var options = select.attr('options');
    $('option', select).remove();
        $.each(result, function(index, array) {
            $('option', select) = new Option(array['email']); // the line error
        });
    });
}


$(document).ready(function() { 
    changeoption();
    $('#userName').change(function() {
        changeoption();
    });
});

</script>

PHP code

<?php

$result = array();

if(isset($_GET['userName'])) {
    $query = $dbh->prepare("SELECT email FROM tbl_users WHERE username = ? ORDER BY userId");
    $query->execute(array($_GET['userName']));
    $result = $query->fetchAll(PDO::FETCH_ASSOC);
}

echo json_encode($result);
?>

HTML code

<form>
<!-- first select populated by another query inside this page-->
<select name="userName" id="userName">
<option>Name1</option>
<option>Name2</option>
<option>Name3</option>
</select>

<!-- second select -->
<select name="email" id="email">
</select>
</form>

Upvotes: 2

Views: 1683

Answers (4)

James McDonnell
James McDonnell

Reputation: 3710

$('option', select) = new Option(array['email']); // the line error

In this line the $(...) is a function. You may be so used to using jQuery that you have lost sight of this. You cannot perform $(...) = ...; just like you cannot perform alert() = ...;

Change:

$('option', select).remove();
    $.each(result, function(index, array) {
        $('option', select) = new Option(array['email']); // the line error
    });
});

to:

$(select).html('');
$.each(result, function(index, array) {
    $(select).append(new Option(array['email']);
}

Upvotes: 0

Nawwar Elnarsh
Nawwar Elnarsh

Reputation: 1069

If you are a more php than jquery guy

you can put the select in a div 

  <div id='selecthtml'> 
<select name="username" id="username">
 <option>Name1</option>
 <option>Name2</option> 
<option>Name3</option>
 </select>
 </div>

then instead of getjson just use $.get

var url = "users.php?username"+$("#username").val();
    $.get( url, function( data ) {
      $( "selecthtml" ).html( data );
});

and of course your php users.php should return an html select (not json) like this

<select name="username" id="username">
     <option>New name 1</option>
     <option>new name 2</option> 
</select>

Upvotes: 0

Jens A. Koch
Jens A. Koch

Reputation: 41737

You might use string append:

$('<option value="new">newOption</option>').appendTo("#email");

$('<option value="'+array['email']'+">'+array['email']+'</option>')
 .appendTo("#email");

Upvotes: 0

Dennis Martinez
Dennis Martinez

Reputation: 6512

You're trying to assign to a jQuery object. Try creating the new option a different way.

instead of 

$('option', select) = new Option(array['email']);

try

$('<option />', {
    html: array['email'],
    value: array['email']
}).appendTo('#email');

JSFiddle

Upvotes: 2

Related Questions