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

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

你的 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 2

试试

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 3

我手动填充了您的数组“profileData”来测试代码，它似乎确实有效。所以问题可能是当你的函数运行时你的 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/