<select>选项在没有AJAX的情况下更改

时间:2015-05-06 10:52:01

标签: javascript php jquery html

题 我有两个&lt; select&gt;输入,第一个是国家,第二个是更具体的位置。因此,如果您将国家/地区设置为英国,则会在数据库中收到英国境内的所有选项。 我知道这对AJAX来说非常简单,但是我不想使用AJAX。 require_once(&#34; FUNC / connect.php&#34); $ query =&#34; SELECT * FROM site_locations&#34 ;; $ stmt = $ db-&gt; prepare($ query); $ stmt-&GT;执行(); while($ row = $ stmt-&gt; fetch(PDO :: FETCH_ASSOC)){ } &lt; div class =&#34; form-group&#34;&gt;     &LT;标签&gt;国家&LT; /标签&gt;     &LT; DIV&GT;         &lt; select class =&#34; form-control&#34;命名=&#34;国家&#34;所需&GT;         &lt;?php include(&#39; includes / country_list.php&#39;);?&gt;         &lt;! - 这是选择国家/地区的地方 - &gt;         &LT; /选择&GT;     &LT; / DIV&GT; &LT; / DIV&GT; &lt; div class =&#34; form-group&#34;&gt;     &lt; label&gt;特定网站位置&lt; / label&gt;     &LT; DIV&GT;         &lt; select class =&#34; form-control&#34;必填名称=&#34;网站&#34;&gt;             &LT;选项&GT;&LT; /选项&GT;             &lt ;! - 这里设置选项 - &gt;     &LT; / DIV&GT; &LT; / DIV&GT; 我对解决方案的想法 创建一个包含位置子阵列的国家/地区阵列,然后如果选择了英国,那么javascript可以使用阵列中的所有位置更新站点位置。 或者,我必须使用AJAX,但我真的不想。

2 个答案:

答案 0 :(得分:1)

因此,对您的问题的纯理论答案将如下所示:

$locations = [];
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
    if (!isset($locations[$row['country']])
    {
        $locations[$row['country']] = [];
    }
    $locations[$row['country']][] = $row['location'];
}

然后,填充国家/地区选择元素:

$countries = array_keys($locations);
foreach ($countries as $country)
{
    echo '<option value="' . $country . '">' . $country . '</option>';
}

要使位置映射可用于您的JS代码,只需写下:

var locationsMap = <?php ech json_encode($locations); ?>;

最后,将一个事件监听器附加到country select元素,该元素填充 change 事件上的locations元素,然后就完成了

但在实践中,这只是理论:

使用AJAX,这种类型的响应与

完全相同

使用AJAX,你所要做的就是附加相同的事件监听器(更改country元素),并将选定的值传递给AJAX请求,该请求返回应该用于填充locations元素的值: / p>

<select class="form-control" id="country" name="country"  required>
    <!-- populate whichever way you want -->
</select>

然后:

document.querySelector('#country').addEventListener('change', function(e)
{
    //if you want to support very old browsers
    e = e || window.event;
    var country = this.options[this.selectedIndex].value;//or .text
    var req = new XMLHttpRequest();
    req.open('post', 'yourUrl', true);
    req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    req.onreadystatechange = function()
    {
        if (this.readyState===4 && this.status===200)
        {//assuming the AJAX request returns the options for locations element:
            document.querySelector('#locations').innerHTML = this.responseText;
        }
    };
    req.send('country=' + country);//send selected value
});
//or with jQuery:
$('#country').on('change', function()
{
    var data = {country: $(this).val()};
    $.ajax({
        url: 'yourUrl',
        method: 'post',
        data: data,
        success: function(r)
        {
            $('#locations').html(r);//<-- something like that
        }
    });
});

注意:
自从我上次做了一些前端工作以来已经有一段时间了,我把它写在了我的头顶,所以这不是一个可复制的代码片段。它还远没有优化,但它应该足以让你开始。

PS:您在评论中链接到w3schools,您可能想要检查MDN。他们仍然倾向于为所有JS提供更好,更完整的文档

答案 1 :(得分:0)

尝试这样的事情。但是我建议使用AJAX ......

<form method = "post">
     <select name="country" onchange="this.form.submit()">
        <option value='a'>A</option>
        <option value='b'>B</option>
        <option value='C'>C</option> 
        .....
    </select>

    <select name="location">
      <?php 
         if(isset( $_POST['country'] )){
          //code here to fetch relevant data
         }
      ?>
    </select>

</form>