2014-03-31 17 views
0

我使用jQuery創建組合框,但我無法在文本框中打印下拉選擇的數據。如何獲取下拉選擇的值,在div標籤中定義

這我我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); 
?> 

我是如何從組合框和表演獲得文本數據.. 請幫助

回答

0

可能是這個演示可以幫助你,因爲它表明,當它改變時如何獲得組合框的值:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/events.htm?arctic。另一種方法是使用「val」方法。

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); 
    }); 
+0

感謝您的幫助,獲取選定值 – TK91

0

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

我展示瞭如何組合框從 – TK91