简体   繁体   中英

how to get the drop down selected value which define in div tag

i create a combobox using jquery but i cannot print the dropdown selected data in textbox.

This i my jquery code..

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

in new.php page contain....

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

how i get the data from combobox and show in textbox.. Please help

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>

May be this demo can help you, because it shows how to get the ComboBox's value when it is changed: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/events.htm?arctic . Another approach is to use the "val" method.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM