Question

我使用jquery创建了一个组合框，但我无法在文本框中打印下拉列表中的选定数据。

这是我的jquery代码..

<html>
<head>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css">
<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
</head>
<body>
Create a div tag for the ComboBox.

<div id="jqxcombobox" ></div>

<script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'name' }

            ],
            url: 'new.php'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxcombobox").jqxComboBox(
        {
            source: dataAdapter,
            theme: 'classic',
            width: 200,
            height: 25,
            selectedIndex: 0,
            displayMember: 'name',
            valueMember: 'name'
        });
    });
</script>
</body>
</html>

new.php页面中的

包含....

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
    print "can't find $database";
}
// get data and store in a json array
$query = "SELECT distinct name FROM customer";
$from = 0; 
$to = 30;
$query .= " LIMIT ".$from.",".$to;

$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $customers[] = array(
        'name' => $row['name']

      );
}

echo json_encode($customers);
?>

我如何从组合框中获取数据并在文本框中显示.. 请帮忙

Answer 1

<强> HTML：

<input type="text" id="textBoxElement" disabled>
<select id="selectElement">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>

<强>的JavaScript / jQuery的：

<script>
    $(document).ready(function() {
        var selectElement = $('#selectElement');
        var textBoxElement = $('#textBoxElement');

        selectElement.on('change', function() {
            textBoxElement.val(selectElement.val());
        });
    });
</script>

Answer 2

可能这个演示可以帮助您，因为它显示了如何在更改时获取ComboBox的值：http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/events.htm?arctic。另一种方法是使用＆＃34; val＆＃34;方法。

HTML

<div id='jqxComboBox'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Get value" />
    <input id="textField" />
</div>

的JavaScript

 var source = [
      "Affogato",
      "Americano",
      "Bicerin",
      "Breve",
      "Café Bombón",
      "Café au lait",
      "Caffé Corretto",
      "Café Crema",
      "Caffé Latte"];

  // Create a jqxComboBox
  $("#jqxComboBox").jqxComboBox({
      source: source,
      theme: 'energyblue',
      width: '200px',
      height: '25px',
      selectedIndex: 2
  });
  $("#jqxButton").jqxButton({
      theme: 'energyblue'
  });

  $('#jqxButton').on('click', function () {
      var value = $("#jqxComboBox").jqxComboBox('val');
      $("#textField").val(value);
  });

如何获取在div标签中定义的下拉选择值

2 个答案: