Question

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

这就是我要做的事情：我的网页里面有一个表单和一个表，表格数据是用php动态获取的。表单将编辑数据。因此，当按下编辑按钮时，相对于它的行数据将自动填入表单。

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

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

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

Answer 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;**  }
}

这将有助于你。

Answer 2

这有效http://jsfiddle.net/ZE6BX/12/

表格中的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];


    });
});

使用Js更改选择选项的值而不刷新页面

2 个答案: