Question

以下是下拉列表的代码。第二个下拉结果基于第一个下拉选择填充。使用此代码，一切正常。

但问题是它在第二个下拉列表中显示hospital_id作为文本和值。我希望将值保持为hospital_id，但如何将文本更改为hospital_name（这是表mfb_hospital中的另一列）。

我的代码：

<?php
  $db = new mysqli('localhost','root','redhat','echodeve_mfb_temp');//set your database handler
  $query = "SELECT bp_id,bp_name FROM mfb_billing";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("bp_id" => $row['bp_id'], "val" => $row['bp_name']);
  }

  $query = "SELECT bp_id, hospital_id, hospital_name FROM mfb_hospital";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['bp_id']][] = array("bp_id" => $row['bp_id'], "val" => $row['hospital_id']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
    <script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
      ?>
function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 1; i < categories.length; i++){
          select.options[i] = new Option(categories[i].val,categories[i].bp_id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].hosp);
        }
      }
    </script>
<script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
        dateFormat: "yy-mm-dd",
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
        dateFormat: "yy-mm-dd",
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>

  <body onload='loadCategories()'>
   <form id="reportvalue" action="backend.php" method="post">

    <select id='categoriesSelect'>
        <option value="1">Select Billing Provider</option>
    </select>

    <select name='hospitalname[]' id='subcatsSelect' multiple='multiple'>
        <option value="all">Select Billing Provider</option>
    </select>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<?php
//$a = $_REQUEST['hospitalname[]'];
//echo $a;
?>
   <input type="submit" name="Submit" value="Submit">
  </form>
  </body>
</html>

Answer 1

我建议你使用id .append函数一个简单的例子编码如下：

        $.each(json, function(){

        $('#subcatsSelect').append("<option value='"+json.id+"'>"+json.name+"</option>");
    });

请注意：

$。each（json，function（）只是您填充第二个选项的操作示例。

如何将JavaScript结果转换为显示下拉列表为<option val =“value”> Text </option>

1 个答案: