Question

I am trying to query this data like in a

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

This is the code I need to query:

<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

Take a look at this demo and view the source. It is possible to make jqxDropDownList copy the items from a <select> tag and use it as its source.

The 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');

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