Question

<div data-role="page" id="page">
    <div data-role="header">

    <h4> Page Refresh</h4>
    </div>

    <div data-role="content">       

          <div data-role="fieldcontain" data-theme="b">
            <ul data-role="listview" data-inset="true">

            <li data-role="list-divider"> List of Contractors </li>         
                <li> 
                    <label for="select-choice-1" class="select">Main Location</label>
                       <select name="main_location" id="select-choice-1">
                          <option value="NSW">NSW</option>
                          <option value="ACT">ACT</option>
                          <option value="VIC">VIC</option>
                          <option value="SA">SA</option>
                          <option value="QLD">QLD</option>
                          <option value="NT">NT</option>
                          <option value="WA">WA</option>
                          <option value="TAS">TAS</option>
                        </select>                     
              </li> <!-- Select Menus: Main Location-->  

                <li>  <h3> Company 1 in NSW  </h3>    </li>                     
                <li>  <h3> Company 2 in NSW  </h3>    </li>                     
                <li>  <h3> Company 3 in NSW  </h3>    </li>                     
                <li>  <h3> Company 4 in NSW  </h3>    </li>                                                         

          </div>       
    </div>
    <div data-role="footer">

    </div>
</div>

我有一个包含国家/地区列表的下拉列表，下面是我列出的公司。

我想知道是否可以根据下拉列表中选择的值动态填充页面刷新公司列表。

简单来说，如果选择新南威尔士州的价值，那么公司名单应该只包含新南威尔士州的公司。

如果有人可以用一个例子来解释我，我将不胜感激。

Answer 1

服务器读取PHP代码，然后将输出转换为HTML。

再次获取PHP（在页面上执行操作后）的唯一方法是重新提交页面或将其定向到新页面。

您可以使用JavaScript在客户端执行操作，但同样，PHP代码仅在开始时读取。

以下是使用JS可以做的事情的示例：

<form name="vehicle">
    Car Make: 
    <select name="carbrand" onChange="updatecartype(this.selectedIndex)" >
    <option selected>Select A Car Brand</option>
    <option value="ford">Ford</option>
    <option value="mazda">Mazda</option>
    <option value="kia">Kia</option>
    </select>

    Car Model: 
    <select name="cartype" >
    <option value="NONE" selected>-------------------</option>
    </select>
</form>

<script type="text/javascript">

    var carbrandlist=document.vehicle.carbrand
    var cartypelist=document.vehicle.cartype

    var cartype=new Array()
    cartype[0]=""
    cartype[1]=["Focus|focus", "F-150|f150", "Taurus|taurus"]
    cartype[2]=["Protege|protege", "Tribute|tribute", "RX-8|rx8", "CX-9|cx9"]
    cartype[3]=["Rio|rio", "Sedona|sedona", "Optima|optima", "Soul|soul", "Sorento|sorento"]

    function updatecartype(selectedcar){
        cartypelist.options.length=0
        if (selectedcar>0){
            for (i=0; i<cartype[selectedcar].length; i++)
            cartypelist.options[cartypelist.options.length]=new Option(cartype[selectedcar][i].split("|")[0], cartype[selectedcar][i].split("|")[1])
        }
    }

</script>

这是一个直接的重新提交/ 2页面方法，仅根据要求使用PHP。

//step1.php
//================

<form method='post' action='step2.php'>

Choose State <br>
<select name='state'>
<option value='MI'>Michigan</option>
<option value='IL'>Illinois</option>
</select>

<input type='submit' value='Select State'>

</form>



//step2.php
//================

<form method='post' action='step3.php'>

Choose Company <br>
<select name='company'>

<?php
$state_choice = $_POST['state'];

if ($state_choice == 'MI') {

    echo "<option value='ABC'>Company ABC</option>";
    echo "<option value='DEF'>Company DEF</option>";

}
if ($state_choice == 'IL') {

    echo "<option value='UVW'>Company UVW</option>";
    echo "<option value='XYZ'>Company XYZ</option>";

}
?>

</select>

<input type='submit' value='Select Company'>

</form>

Answer 2

这是一个简单的例子：

http://www.w3schools.com/php/php_ajax_database.asp

如何在PHP中创建动态搜索栏而不用PHP刷新页面？

2 个答案: