Question

我一直在寻找使用javascript填写以前信息的表单，并且能够填充文本框，但是下拉选项会导致问题。我正在按照this方法选择特定选项，但它似乎不适用于我的其余代码。它只有在我创建一个没有for循环来填充文本框的单独页面时才有效。我已经检查了选项的名称和ID，看看我的代码中是否存在其他地方的重叠，但事实并非如此。我原本以为我解决了这个问题，因为我误解了期权价值与期权指数之间的差异。但这没有改变。我一直在使用console.log来验证是否正在调用每个步骤，并且每个输入都是合适的。我试过注释掉代码并静态设置元素。

我遇到的问题是，当我选择要编辑的配置文件时，下拉框不会填充。文本框填充上次保存的数据，但下拉列表中不显示任何内容。什么会导致下拉不填充？

这是html：

<!-- Edit Button to edit a profile -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="editModalLabel">Edit Profile</h4>
     </div>
     <div class="modal-body">
       <form method="get" name="editprofiledata" id="editprofiledata">
        <div >
          <label>Details</label>

          <table  id="tableID" class="table table-bordered table-hover tablewithtooltip">
            <thead>
              <tr style="background-color: #787878 ">
                <th>Attribute</th>
                <th>Value</th>
              </tr>
            </thead>

            <tbody>
              <tr><td>Profile Name</td><td><input type="text" value="" name="selectedProfileName" id="selectedProfileName"/></td></tr>
              <tr><td>Profile Mnemonic</td><td><input type="text" value="" name="profileMnemonic" id="profileMnemonic"/></td></tr>
              <tr><td>Tx Data Rate</td><td><select name="txDataRate" id="txDataRate"><option value="1">64  kbps 1/9</option>
                    <option value="2">128 kbps 2/9</option>
                    <option value="3">256 kbps 1/9</option>
                    <option value="6">256 kbps 2/9</option>
                    <option value="5">512 kbps 2/9</option>
                    <option value="4">512 kbps 1/9</option></select></td></tr>
              <tr><td>Rx Data Rate</td><td><select name="rxDataRate" id="rxDataRate"><option value="1">64  kbps 1/9</option>
                   <option value="2">128 kbps 2/9</option>
                   <option value="3">256 kbps 1/9</option>
                   <option value="6">256 kbps 2/9</option>
                   <option value="5">512 kbps 2/9</option>
                   <option value="4">512 kbps 1/9</option></td></tr>    
            </tbody>
      </table>
       </div>
      </form>
     </div>
     <div class="modal-footer">
        <button type="submit" class="btn btn-default btn-default" data-dismiss="modal" name="updateProfile" id="updateProfile" onclick="saveUpdatedProfile()">Save</button>
     </div>
  </div><!-- /.modal-content -->

这是javascript：

function editProfile(){
 $('#editModal').modal();

 var attributeList1 = ["selectedProfileName","profileMnemonic", "txDataRate", "rxDataRate", ... more attributes ...];

 for(var i=0;i<attributeList1.length;i++)

  {

  attr1=attributeList1[i];

  if (attr1 == "txDataRate" || attr1 == "rxDataRate"){

    if (profileData[attr1]==1){
        document.getElementById(attr1).selectedIndex=0;
    }
    else if (profileData[attr1]==2){
        document.getElementById(attr1).selectedIndex=1;
    }
    else if (profileData[attr1]==3){
        document.getElementById(attr1).selectedIndex=2;
    }
    else if (profileData[attr1]==6){
        document.getElementById(attr1).selectedIndex=3;
    }
    else if (profileData[attr1]==5){
        document.getElementById(attr1).selectedIndex=4;
    }
    else {
        document.getElementById(attr1).selectedIndex=5;
    }
  }
  else{
    document.getElementById(attr1).value=profileData[attr1];
      }
  }
 }

编辑添加：我已尝试$('#'+attr1+' option:[value='+profileData[attr1]+']').prop('selected',true);选择正确的下拉选项而不做任何更改。（找到建议here）

Screenshot of problem showing the filled textboxes and empty dropdowns.

解决了！另一个功能是覆盖html ID，因此我的if / for语句无法更改选定的下拉ID。

Answer 1

尝试

document.getElementById(attr1).options.selectedIndex = 5;

编辑*

我进行了以下编辑，并使用您的标记从firebug控制台调用该函数，并选择了这些选项。在此之后，我没有想法。对不起，如果没有帮助，祝你好运！

  function editProfile(){


 var attributeList1 = ["selectedProfileName","profileMnemonic", "txDataRate", "rxDataRate"],
     profileData = {"rxDataRate":3,"txDataRate":5,"selectedProfileName":"abcd","profileMnemonic":"efgh"};

 for(var i=0;i<attributeList1.length;i++){

  attr1=attributeList1[i];

  if (attr1 == "txDataRate" || attr1 == "rxDataRate"){

    if (profileData[attr1]==1){
        document.getElementById(attr1).options.selectedIndex=0;
    }
    else if (profileData[attr1]==2){
        document.getElementById(attr1).options.selectedIndex=1;
    }
    else if (profileData[attr1]==3){
        document.getElementById(attr1).options.selectedIndex=2;
    }
    else if (profileData[attr1]==6){
        document.getElementById(attr1).options.selectedIndex=3;
    }
    else if (profileData[attr1]==5){
        document.getElementById(attr1).options.selectedIndex=4;
    }
    else {
        document.getElementById(attr1).options.selectedIndex=5;
    }
  }
  else{
    document.getElementById(attr1).value=profileData[attr1];
      }
  }

}

Answer 2

你的if语句是否正常工作？我的意思是你达到陈述document.getElementById(attr1).selectedIndex=1;。我要做的一件事就是放console.log('selecting 1st index');并确保我进入if语句，如下所示：

if (profileData[attr1]==1){
    console.log('selecting 1st index');
    document.getElementById(attr1).selectedIndex=0;
}

此外，您的profileData正在填充的位置？

Answer 3

我手动填充你的数组＆＃34; profileData＆＃34;测试代码，它似乎确实有效。所以问题可能是你的profileData数组在你的函数运行时是空的

function testDropDownAutoFill(){
 //$('#editModal').modal();
 var attributeList1 = ["selectedProfileName","profileMnemonic", "txDataRate", "rxDataRate"];   
    var profileData = {
        "txDataRate" : Math.floor(Math.random() * 6) + 1,
        "rxDataRate" : Math.floor(Math.random() * 6) + 1,
    }  
    //console.log(profileData["txDataRate"] +" & " + profileData["rxDataRate"]);
 for(var i=0;i<attributeList1.length;i++)
  {
      var attr1=attributeList1[i];
      if (attr1 == "txDataRate" || attr1 == "rxDataRate"){     
          $("#"+attr1).val(profileData[attr1]);
      }      
  }
 }

参见JSFiddle：http://jsfiddle.net/angrybird/qvqmL8tv/

设置表单进行编辑时，下拉菜单未填写

3 个答案: