0

所以我想使用javascript更改选择选项，但不重新加载页面。我可以使用 document.getElementById.value 更改其他元素数据，但不能使用 select 元素

这就是我想要做的：我的网页中有一个表格和一个表格，表格数据是使用 php 动态获取的。表单将编辑数据。因此，当按下编辑按钮时，针对它的行数据将自动填充到表单中。

表单的所有其他元素都可以使用我的代码获取数据。除了选择选项输入元素。下面是我在这里为 jsfiddle 表单的每个元素使用的代码：http: //jsfiddle.net/ZE6BX/11/

document.getElementById("l_type").value = data[1];

数据数组包含按下编辑的行的值！

4

2 回答 2

1

您可以检查是否使用索引值或选项值。

var opt = ocument.getElementById('l_type').options;
for(var i=1;i<opt.length;i++){
  if(opt[i].value == 'Ve'){
    **opt[i].selected = true;**  }
}

这会帮助你。

于 2013-10-29T10:28:37.077 回答
0

这工作http://jsfiddle.net/ZE6BX/12/

您在表中的 VE 和选择中的值 Ve 之间存在大小写差异。
这是代码

HTML：

<div id="l-form">
    <form method="post" class="DA_custom_form" id="l-form" action="php/add.php">
            <h3>Add</h3>

        <label>Name</label>
        <input type="text" class="field" id="l_name" name="l_name" />
        <label>City</label>
        <input type="text" class="field" id="l_city" name="l_city" />
        <label>Phone</label>
        <input type="text" class="field" id="l_phone" name="l_phone" />
        <label>OP</label>
        <div class="cl">&nbsp;</div>
        <input type="text" class="field" id="l_op" name="l_op" />
        <label>Type</label>
        <select class="select_field" id="l_type" name="l_type">
            <option value=" ">Select type</option>
            <option value="cu">Cu</option>
            <option value="Ve">Ve</option>
            <option value="Ex">Ex</option>
        </select>
        <div class="cl">&nbsp;</div>
        <div class="btnp">
            <input type="submit" value="Save" name="submit" id="submit" />
        </div>
</div>
</form>
</br>
</br>
<table id="existing" border=1>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>View/Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr style:padding-left:10px;>
            <td>sweet_name</td>
            <td>Ve</td>
            <td style="display:none">dream_city</td>
            <td style="display:none">123456</td>
            <td style="display:none">SWAG</td>
            <td>
                <button class="edit_button" value="Edit" name="button">Edit</button>
            </td>
        </tr>
    </tbody>
</table>

JS：

$(document).ready(function () {
    var data;
    $("#existing").on("click", ".edit_button", function () {
        data = $(this).closest("td").siblings().map(function () {
            return $(this).text();
        }).toArray();

        console.log(data[0]); // name
        console.log(data[1]); //type
        console.log(data[2]); //city
        console.log(data[3]); //phone
        console.log(data[4]); //op

        document.getElementById("l_name").value = data[0];
        $("#l_type").value = data[1];
        document.getElementById("l_city").value = data[2];
        document.getElementById("l_phone").value = data[3];
        document.getElementById("l_op").value = data[4];


    });
});
于 2013-10-29T07:59:33.997 回答