onchange我想过滤一个具有动态名称的下拉列表

时间:2017-05-21 04:11:55

标签: javascript

我遇到了一个复杂的javascript问题,请帮忙。

有2个下拉列表,属性名称为" dynamic"。用户可以添加额外的div,逻辑工作正常,因此它与我现在的问题无关。

当用户从下拉列表中选择产品时,我想显示与产品索引相关的年份。我可以获取产品名称和后缀,但不知道如何获取或设置会计年度属性属性。

<script type="text/javascript">

    function loadYear(obj) {
        alert("The attribute name is " + obj.name);
        var suffix = obj.name.match(/\d+/);
        alert("the suffix is  " +suffix);

        alert(" how to get the name and value of Fiscal_Year attribute that changes dynamically");

    }
</script>

<div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                                    <select name="[0].Product" onchange="loadYear(this);">
                                            <option value="15>Corporate HQ</option>
                                            <option value="16">Data Campaign</option>
                                            <option value="17">Digital Products </option>
                                    </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-8">
                        <select name="[0].FISCAL_YEAR">
                                    <option value="15">FY15</option>
                                    <option value="16">FY16</option>
                                    <option value="17">FY17</option>
                        </select>
                    </div>
                </div>

</div>

<div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                                    <select name="[1].Product" onchange="loadYear(this);">
                                            <option value="15>Corporate HQ</option>
                                            <option value="16">Data Campaign</option>
                                            <option value="17">Digital Products </option>
                                    </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-8">
                        <select name="[1].FISCAL_YEAR">
                                    <option value="15">FY15</option>
                                    <option value="16">FY16</option>
                                    <option value="17">FY17</option>
                        </select>
                    </div>
                </div>

</div>

2 个答案:

答案 0 :(得分:0)

而不是像[0].Product这样的名称,你可以动态创建Product_0FISCAL_YEAR_0之类的名称,这很容易,因为在你的loadYear函数中你可以做到

obj.name.replace('Product_', '');

这将为您提供所选产品的索引..然后您可以使用javascript访问年份

你的逻辑可以吗?

答案 1 :(得分:0)

也许这样的事情会起作用:

function loadYear(obj) {
    alert("The attribute name is " + obj.name);
    var suffix = obj.name.match(/\d+/);
    alert("the suffix is  " +suffix);

    // Get the year value from the year selection
    var selectedYear = obj.value;
    // Find the corresponding FISCAL_SELECT element
    var fiscalSelects = document.getElementsByName("[" + suffix + "].FISCAL_YEAR");
    if (fiscalSelects != null && fiscalSelects.length > 0) {
        // Set the value (assuming only one element exists)
        fiscalSelects[0].value = selectedYear;
    }
}

根据要求,这是使用jQuery实现的该函数的最后一点:

// Get the year value from the year selection
var selectedYear = $(obj).val();
// Find the corresponding FISCAL_SELECT element
var fiscalSelects = $('[name="[' + suffix + '].FISCAL_YEAR"]');
if (fiscalSelects != null && fiscalSelects.length > 0) {
    // Set the value (assuming only one element exists)
    fiscalSelects[0].val(selectedYear);
}