php - 如何使用 PHP 和 MySQL 转换或查询此 Jquery 数据，如表单 - 选择 - 选项示例

Question

我正在尝试像在

<form name="" action="test" method="post" 
    <select  name="people">
        <option value="1">1 Person</option>
        <option value="2">2 People</option>
        <option value="3">3 People</option>
        <option value="4">4 People</option>
        <option value="5">5 People</option>
        <option value="6">6 People</option>
    </select>
</form>

这是我需要查询的代码：

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

Answer 1

看看这个演示并查看源代码。可以jqxDropDownList从标签复制项目<select>并将其用作其来源。

JavaScript

// grab all the original options
var select_options = $('#people option');

// hide the original select box
$('#people').hide();

// Create a jqxDropDownList
$("#jqxDropDownList").jqxDropDownList({ width: '200px', height: '25px' });

// Load the data from the Select html element.
$("#jqxDropDownList").jqxDropDownList('loadFromSelect', 'people');

// updates the select's selection.
$("#jqxDropDownList").bind('select', function (event) {
    if (event.args) {
        var args = event.args;
        // select the item in the 'select' tag.
        var index = args.item.index;
        select_options[index].attr("selected", "true");
    }
});

// selects the first item.
$("#jqxDropDownList").jqxDropDownList('selectedIndex', '0');

的HTML

<form method="post" action="">

  <label for="people">Number of People</label>
  <select name="people" id="people">
    <option value="1">1 Person</option>
    <option value="2">2 People</option>
    <option value="3">3 People</option>
    <option value="4">4 People</option>
    <option value="5">5 People</option>
    <option value="6">6 People</option>
  </select>

  <div id="jqxDropDownList"></div>

</form>