从 jQuery 源数组访问数据？答案

【问题标题】：accessing the data from the jQuery source array?从 jQuery 源数组访问数据？
【发布时间】：2012-10-03 05:12:16
【问题描述】：

UI 设计师给了我这个代码，我不知道如何发布将源数组数据选择到 php 脚本中，以便我可以使用 MySQL 查询它，对不起，我一个 JQuery 的初学者，我想像表单选项选择样式一样查询数组，还是使用关联数组更好？

<div id='content'>
  <script type="text/javascript">
    $(document).ready(function () {
        var source = [
            "Select Your location",
            "North London",
            "South London",
            "West London",
            "East London",
            "City of London",  
        ];

        // Create a jqxDropDownList  
        $("#jqxDropDownList").jqxDropDownList({ 
            source: source,    
            selectedIndex: 0, 
            width:   '250px', 
            height: '35px', 
            theme: 'summer' 
        });
    });
</script>
<div id='jqxDropDownList'>

【问题讨论】：

需要使用ajax或者json！在这里查看：http://stackoverflow.com/questions/1968296/how-to-i-send-data-from-javascript-to-php-and-vice-versa
只是去看看谢谢

标签： php javascript jquery

【解决方案1】：

如果您只需要使用这个精美的下拉菜单作为普通下拉菜单，这里是示例（不需要 ajax）：

<html>
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>

</head>
<body>
<div id='content'>
  <script type="text/javascript">
    $(document).ready(function () {
        var source = [
            "Select Your location",
            "North London",
            "South London",
            "West London",
            "East London",
            "City of London",  
        ];

        // Create a jqxDropDownList  
        $("#jqxDropDownList").jqxDropDownList({ 
            source: source,    
            selectedIndex: 0, 
            width:   '250px', 
            height: '35px', 
            theme: 'summer' 
        });

        $('#jqxDropDownList').bind('select', function (event) { 
            $('#location').val($("#jqxDropDownList").jqxDropDownList('getSelectedItem').label);        
        });

    });


</script>
<div id='jqxDropDownList'></div>

<form>
<input type="text" id="location" name="location" value="not selected" />
<input type="submit" value="selected!">
</form>

<div><?php if (isset($_GET['location'])) print('You selected: '.$_GET['location']); ?></div>

</div>
</body>
</html>

下载并使用 jqwidgets 库。
将选择事件绑定到 jqwidgets 下拉列表，这会将所选值放入普通（隐藏）表单元素。
在 PHP 中作为正常提交值提交和使用

更多信息：JQWidgets dropdown homepage

【讨论】：