0

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

1 に答える 1

2

この派手なドロップダウンを通常のドロップダウンとして使用する必要がある場合は、次の例を示します (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>
  1. jqwidgets ライブラリをダウンロードして使用します。
  2. 選択イベントを jqwidgets ドロップダウンにバインドします。これにより、選択した値が通常の (非表示の) フォーム要素に配置されます。
  3. 通常の送信値として送信し、PHP で使用する

詳細: JQWidgets ドロップダウン ホームページ

于 2012-10-12T12:45:46.160 に答える