javascript - 使用模板获取和设置所选选项

Question

如何使用 javascript 或 jQuery 更改下拉列表的选定选项？

<select id ="someId" name="someName">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select><br>

<label>item1:</label>
<input type="text" name="item1" value= <%= someValue %>><br>
<label>Line item2:</label>
<input type="color" name="item2" value= <%= someValue1 %>><br>
<label>item3:</label>
<input type="number" name="item3" min=0 value= <%= someValue2 %>><br>
<label>item4:</label>
<input type="color" name="item4" value= <%= someValue3 %>><br>

我将此 html 保存在一个名为 template 的变量中。我如何在下拉列表中获取和设置所选选项，因此结果将是相同的模板，其中选择了三个选项之一。先感谢您。结果示例:

<select id ="someId" name="someName">
    <option selected>One</option>
    <option>Two</option>
    <option>Three</option>
</select><br>

<label>item1:</label>
<input type="text" name="item1" value= <%= someValue %>><br>
<label>Line item2:</label>
<input type="color" name="item2" value= <%= someValue1 %>><br>
<label>item3:</label>
<input type="number" name="item3" min=0 value= <%= someValue2 %>><br>
<label>item4:</label>
<input type="color" name="item4" value= <%= someValue3 %>><br>

Answer 1

有一种类似的 JavaScript 方法可以做到这一点:

// code for setting item_id
var template = '<select id ="someId" name="someName"> \
    <option ';
if(item_id == 1) {
    template += 'selected';
}
template += ' >One</option> <option ';
if(item_id == 2) {
    template += 'selected';
}
template += ' >Two</option> <option ';
if(item_id == 3) {
    template += 'selected';
}
template += ' >Three</option> \
</select><br> \
<label>item1:</label> \
<input type="text" name="item1" value= <%= someValue %>><br> \
<label>Line item2:</label> \
<input type="color" name="item2" value= <%= someValue1 %>><br> \
<label>item3:</label> \
<input type="number" name="item3" min=0 value= <%= someValue2 %>><br> \
<label>item4:</label> \
<input type="color" name="item4" value= <%= someValue3 %>><br>';
// code for injecting into DOM

打字和打断有点多，但它会解决您设置模板的问题。

如果您愿意，您可以使用少量 PHP 来执行此操作，这对普通用户来说是不可见的(如果您没有访问权限，则需要一些严重的黑客攻击才能查看事件的 PHP 代码到服务器)。以这种方式更改模板:

// code for setting item_id
var template = '<?php $selected = ' + item_id + ' ?> \
<select id ="someId" name="someName"> \
    <option <?php if($selected === 1){ echo 'selected'; } ?> >One</option> \
    <option <?php if($selected === 2){ echo 'selected'; } ?> >Two</option> \
    <option <?php if($selected === 3){ echo 'selected'; } ?> >Three</option> \
</select><br> \
<label>item1:</label> \
<input type="text" name="item1" value= <%= someValue %>><br> \
<label>Line item2:</label> \
<input type="color" name="item2" value= <%= someValue1 %>><br> \
<label>item3:</label> \
<input type="number" name="item3" min=0 value= <%= someValue2 %>><br> \
<label>item4:</label> \
<input type="color" name="item4" value= <%= someValue3 %>><br>';
// code for injecting into DOM

PHP 的第一行设置变量 $selected 的值，接下来的 3 行检查该值并将正确的选项设置为 selected。这是我所知道的最快的修复方法，但它需要一个 PHP 处理引擎，例如 Apache。大多数托管都启用了它(至少我曾经使用过)。