Javascript函数不能使用不同的属性ID或名称格式

时间:2017-05-22 22:51:02

标签: javascript jquery

我有一个默认值的下拉列表。我需要清空列表并将新列表值附加到下拉列表中。当下拉属性id采用如下简单格式时,下面的函数可以正常工作:CCManager

对于我的应用程序,我需要将属性id设置为[1].CCManager[2].CCManager等。我尝试了不同的方法来使下面的函数用于id名称,但是失败了。

属性名称是使用后缀动态生成的,这就是我必须使用此格式的原因。

function load123(obj) {
    var ccmDDL = $('#CCManager');
    ccmDDL.empty();
    ccmDDL.append($('<option />', {
        value: '2222',
        text: 'Appended'
    }));
}

以下是我正在使用的选择下拉列表。当我从第一个下拉列表中选择产品时,我会使用所选产品查询数据库并动态检索与产品相关的会计年度值并填充会计年度下拉列表。

<div class="row">
    <div class="form-group">
        <select name="[0].Product" onchange="load123(this);">
            <option value="15>Corporate HQ</option>
            <option value="16">Data Campaign</option>
        </select>
    </div>

    <div class="form-group">
        <select name="[0].FISCAL_YEAR">
        </select>
    </div>

</div>

<div class="row">
    <div class="form-group">
        <select name="[1].Product" onchange="load123(this);">
            <option value="15>Corporate HQ</option>
            <option value="16">Data Campaign</option>
        </select>
    </div>

    <div class="form-group">
        <select name="[1].FISCAL_YEAR">
        </select>
    </div>

</div>

3 个答案:

答案 0 :(得分:0)

以1,2,3开始,然后方法有4,5,6。

var newManagers = [4, 5, 6];

function load123() {
    var ccmDDL = $('#CCManager');
    ccmDDL.empty();
    for(newManager in newManagers)
    {
      ccmDDL.append($('<option />', { value: 'newManager', text: newManagers[newManager] + ' Manager', id: "["+newManagers[newManager]+"].CCManager" }));
    }
}

load123();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="CCManager">
  <option value="1" id="[1].CCManager">1 Manager</option>
  <option value="2" id="[2].CCManager">2 Manager</option>
  <option value="3" id="[3].CCManager">3 Manager</option>
</select>

答案 1 :(得分:0)

如果我正确理解您的问题,您就会在代码上使用id="[1].CCManager"。您可以使用属性选择器

在jQuery中定位它

&#13;
&#13;
var ccmDDL = $('select[id="[1].CCManager"]');
ccmDDL.empty();
ccmDDL.append($("<option />", { value: "2222", text: "Appended" }));
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="[1].CCManager"></select>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

如果您的下拉列表是动态生成的,您可以使用jQuery'Attribute Ends with'选择器。 - https://api.jquery.com/attribute-ends-with-selector/

$(function(){
console.log($("select[id$='CCManager']").length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="[1].CCManager"></select>
<select id="[2].CCManager"></select>
<select id="[3].CCManager"></select>