使用模板获取和设置选定的选项

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 行检查该值并将正确的选项设置为选中。这是我所知道的最快的修复方法，但它需要一个 PHP 处理引擎，例如 Apache。大多数主机都启用了它（至少我使用过）。

Answer 2

如果我理解您的问题，那么设置选项的简单方法就是仅使用 jQuery。

$(function(){
setOption(2);//selects third option 
});

function setOption(option){
var itter = 0;
$("select option").each(function(){
    if(itter = option)
        $(this).prop('selected', true);
});
}

当然，如果您使用模板，您可以使用像 jQuery Template 这样的插件 创建一个对象并将其与您的模板一起使用 CDN：http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

function selectedOptions(){
    this.opt1 = "";
    this.opt2 = "selected";
    this.opt3 = "";
}
var options = new selectedOptions();
$.tmpl(yourTemplateVariable, options);

您可以将侦听器附加到选择元素，并在它更改时更改选项对象以反映更改。

您的模板需要这些值

<option ${opt1}>One</option>
<option ${opt2}>Two</option>
<option ${opt3}>Three</option>

我怀疑这是您正在寻找的答案，但也许它可以提供一些帮助。

Answer 3

这应该让您开始以 Marionette™ 方式做事：http://codepen.io/benjarwar/pen/YyvOOx

基本思想是，由于您希望在具有相同基础数据的两组不同标记之间进行某种同步，因此 Marionette 非常适合应用 MVC 架构并使用模板/视图的强大功能在不同的上下文中显示该数据.

在我看来，使用某种 MVC 架构（Backbone/Marionette、Angular、React 等）来构建您的应用程序可以为您提供更多可维护的代码。避免陷入编写意大利面条 jQuery 的陷阱。了解如何创建事件驱动的 JavaScript，将逻辑/控制器层和显示/视图层之间的关注点分开。

更新：我进一步充实了这一点，添加了事件绑定，这样当您更改下拉列表中的选定选项时，InputsView 会重新呈现，突出显示当前选定的选项。

HTML：

<div id="select" class="container"></div>
<div id="inputs" class="container"></div>

<script id="select-template" type="text/html">
  <select class="select-menu">
    <% _.each(items, function(option){ %>
      <option name="<%= option.name %>" <% if (option.selected) { %>selected<% } %>>
        <%= option.value %>
      </option>
    <% }); %>
  </select>
</script>

<script id="inputs-template" type="text/html">
  <% _.each(items, function(option){ %>
    <label <% if (option.selected) { %>class="selected"<% } %>><%= option.name %>:</label>
    <input type="text" name="<%= option.name %>" value="<%= option.value %>">
    <br>
  <% }); %>
</script>

CSS：

body {
  padding: 100px;
  font-family: sans-serif;
}

.container {
  margin: 20px;
}

label, input {
  margin: 5px 0;
}

.selected {
  color: red;
  font-weight: bold;
}

JS：

var data = [
  { name: "Foo", value: 'bar', selected: false },
  { name: "Baz", value: 'quz', selected: true },
  { name: "Norf", value: 'zap', selected: false }
];

// create a new Collection from the initial data
var options = new Backbone.Collection(data);

// a View for rendering the dropdown
var SelectView = Marionette.ItemView.extend({
  template: "#select-template",

  // set your ui hash
  ui: {
    "select": ".select-menu"
  },

  // fire an event when the select menu changes
  events: {
    "change @ui.select": "handleSelectChange"
  },

  handleSelectChange: function(e) {
    var $selected = $(e.target).find(":selected"),
        selectedName = $selected.attr("name"),
        selectedModel = this.collection.findWhere({ name: selectedName });

    // on select change, first deselect any previously selected Models
    this.collection.forEach(function(model, index) {
      model.set("selected", false);
    });

    // set the newly selected Model
    selectedModel.set("selected", true);
  }
});

// a View for rendering the inputs
var InputsView = Marionette.ItemView.extend({
  template: "#inputs-template",

  initialize: function() {
    this.listenTo(this.collection, "change", this.render);
  }
});

// instantiate the Views with the same Collection
var inputsView = new InputsView({collection: options});
var selectView = new SelectView({collection: options});


// create a region manager (alternatively build a Marionette.App, or use a LayoutView, etc.)
var rm = new Marionette.RegionManager();

// set up your regions
var regions = rm.addRegions({
  select: "#select",
  inputs: "#inputs"
});

// show your views
regions.select.show(selectView);
regions.inputs.show(inputsView);

JS 依赖：jQuery、Underscore、Backbone、Marionette

Answer 4

我解决问题的方式真的很脏，但它正在工作，所以答案是

<label>Somelabel:</label>
<select name="someName" value= <%= someValue %>>
    <option value="One"<% if (someValue === "One") print("selected")%>>One</option>
    <option value="Two"<% if (someValue === "Two") print("selected")%>>Two</option>
    <option value="Three"<% if (someValue === "Three") print("selected")%>>Three</option>
</select><br>