在另一个选择的基础上更新一个选择

问题描述

嘿，我有一个带有两个选择下拉列表的表单.

Hey I have a form with two select dropdowns in it.

第一个选择中将填充用户的投资组合，第二个选择中将填充投资组合组.我得到了已登录用户的所有投资组合，然后用这些投资组合填充第一选择.现在，我想在第一选择的基础上用组填充第二选择，例如，如果用户选择投资组合_1，则投资组合_1中的所有组都应加载到第二个选择框中.

The first select is populated with the portfolios of a user and the 2nd one needs to be populated with the portfolio groups. I get all the portfolios of the logged in user and populate the 1st select with those portfolios now I want to populate the 2nd select with the groups on the basis of 1st select, For-example if user select portfolio_1 all the groups in the portfolio_1 should be loaded in the 2nd select box.

具有投资组合的第一选择是:

The 1st select with portfolios is:

<select id="portfolios" name="portfolio" style="width: 200px; height:25px;">
    <option selected="selected" value="default">Select Portfolio</option>
    {% for portfolio in portfolios %}
        <option value={{ portfolio.id }}>{{ portfolio.portfolioName }}</option>
    {% endfor %}
</select>

我了解的是，我需要在第一个选择的onchange上调用一个ajax函数，因为该ajax我需要发送选定的投资组合ID并找到具有该ID的所有组，然后返回所有这些组并仅更新第二个选择带有这些组的框，

What I understand is I need to call an ajax function onchange of the 1st select in that ajax I need to send the selected portfolio id and find all the groups with that id and then return all those groups and update only the 2nd select box with those groups,

我不知道如何将要获得的组填充到第二选择中

I dont know how can I populate the 2nd select with the groups I will get

有什么想法吗?

谢谢

推荐答案

<select id="portfolios" name="portfolio" style="width: 200px; height:25px;" onchange="getgropus(this.value)">
<option selected="selected" value="default">Select Portfolio</option>
{% for portfolio in portfolios %}
    <option value={{ portfolio.id }}>{{ portfolio.portfolioName }}</option>
{% endfor %}
</select>
<select id="secondselectBox" name="secondselectBox"  ></select>

call the ajax function on the onchange event of your 1st selectbox
// here is JS code

<script type="text/javascript">
function getgropus(id){
        $.ajax({
            type: 'post',
            url: "your php file path to get groups ",
            data: "&id="+id,
            complete: function(data) {
                $('#secondselectBox').html(data.responseText)
            }
        });
}

</script>

on your php file make options for selectbox of group portfolio and adjust according to your requirnments

<option value="default">Portfolio groups</option>
 .......

这篇关于在另一个选择的基础上更新一个选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！