JSON导致选择选项

时间:2014-03-14 18:22:07

标签: php jquery json

在我的HTML页面中,我有2个选择。 当我将值更改为第一个选择时,第二个选择必须更改为选项值。

控制台出错:

Uncaught ReferenceError: Invalid left-hand side in assignment

如果我添加console.log(result),我会在控制台中看到该对象。

JS代码

<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代码

<?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代码

<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>

4 个答案:

答案 0 :(得分:2)

您正在尝试分配给jQuery对象。尝试以不同的方式创建新选项。

而不是

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

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

JSFiddle

答案 1 :(得分:0)

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

在这一行中,$(...)是一个函数。您可能已经习惯使用jQuery而忽略了这一点。您无法执行$(...) = ...;,就像无法执行alert() = ...;

一样

变化:

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

为:

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

答案 2 :(得分:0)

您可以使用字符串追加:

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

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

答案 3 :(得分:0)

如果你是一个比jquery更多的人

你可以把选择放在div

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

然后使用$ .get

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

当然你的php users.php应该返回一个html选择(不是json) 像这样

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