如何為動態下拉選擇分配ID？

Question

每當使用第一個選擇下拉菜單時，我都想分配一個會話ID（將被隱藏）。 會話ID是“天”之后的數字300、301等。

當用戶從“首選”下拉列表中選擇某項內容時，應將“ 300”值分配給“ sessionid”下拉列表，並同時更改“天”下拉列表的值（已生效）

如何正確實施？

請參見下面的代碼：

<select id="preferred" class="preferred" name="preferred">
  <option value="">- Select -</option>
  <option value="Mountain Dew">Mountain Dew</option>
  <option value="Seven Up">Seven Up</option>
</select>
<select id="day" class="day" name="day">
  <option value=""></option>
</select>
<select id="sessionid" class="sessionid" name="sessionid">
  <option value=""></option>
</select>

$(function() {
  var selectValues = {
   "Mountain Dew": {
   "Monday": "300"
  },
   "Seven Up": {
   "Tuesday": "301"
  }
};

var $preferred = $('select.preferred');
var $day = $('select.day');
var $sessionid = $('select.sessionid');

$preferred.change(function() {
  $day.empty().append(function() {
   var output = '';
   $.each(selectValues[$preferred.val()], function(key, value) {
   output += '<option value="' + key + '">' + key + '</option>';
  });
  return output;
  });
 }).change();
});

例如： http : //jsfiddle.net/creativemix/5ZWrE/2/

Answer 1

您可以使用Element.id = 'id'在javascript中設置ID。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element.id

在您的代碼中，在您想要分配ID的位置上可能是這樣的：

$sessionid[0].id = $day.val();

但是請注意，ID必須以字母開頭，數字即使有效也通常是不正確的做法。

將您需要的值放在隱藏字段中可能比此解決方案更可取。

Answer 2

如果要設置會話ID下拉列表的值，請嘗試此操作。 在您的小提琴中設置輸出變量之后，請包括此內容。

$sessionid.empty()
     .append($("<option></option>")
     .attr("value",value)
     .text(value));

這是小提琴的鏈接 。

但是，正如其他人已經建議的那樣，為什么不使用隱藏的文本字段來存儲值呢？

要將值存儲在隱藏字段中，

<input type="hidden" id="hdnSessionId" />

並將其添加到腳本中。

$('#hdnSessionId').val(value);