jQuery没有在下拉表单中选择正确的选项答案

【问题标题】：jQuery not selecting right option at form with dropdownjQuery没有在下拉表单中选择正确的选项
【发布时间】：2019-02-26 21:19:47
【问题描述】：

我有一个带有以下 HTML 的模态表单：

<div class="input-field col m2 s12">
  <select id="user_id" name="user_id">
    <option value="1">John</option>
    <option value="2">Jane</option>
    <option value="3">Joe</option>
  </select>
  <label for="user_id">User</label>
</div>

我希望在使用以下 jQuery 脚本单击事件时选择正确的项目：

$(document).ready(function () {

$('#calendar').fullCalendar({
  themeSystem: 'jquery-ui',
  slotLabelFormat: "HH:mm",
  timeFormat: 'h:mm',
  businessHours: {
    start: '08:00', // a start time (10am in this example)
    end: '19:00', // an end time (6pm in this example)
  },
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay,listMonth'
  },
  buttonText: {
    today: 'Vandaag',
    month: 'Maand',
    week: 'Week',
    day: 'Dag',
    list: 'Lijst'
  },
  defaultView: 'month',
  weekNumbers: false,
  weekends: false,
  eventLimit: true, // allow "more" link when too many events
  events: 'urltoEvents',

  eventClick: function (calEvent, jsEvent, view) {
    var eventId = calEvent.id;
    var userId = calEvent.user_id;
    var comment = calEvent.comment;
    var startTime = calEvent.start_time;
    var startDate = calEvent.start_date;
    var endTime = calEvent.end_time;
    var endDate = calEvent.end_date;


    $("#updateEvent #start_time").val(startTime);
    $("#updateEvent #start_date").val(startDate);
    $("#updateEvent #end_time").val(endTime);
    $("#updateEvent #end_date").val(endDate);
    $("#updateEvent #user_id").val(userId).attr("selected", "selected");
    $("#updateEvent #eventId").val(eventId);
    $("#updateEvent #comment").val(comment);
    $('#updateEvent').modal('open');
  }
});

不幸的是，这不起作用，它将第一个选项显示为选定的选项。有人可以帮我吗？谢谢。

【问题讨论】：

“[您]点击事件时要选择的正确项目”-下拉列表在下拉列表中选择正确的名称-您指的是什么“事件”？你会做一个小提琴吗？（听众也许会有所帮助？）
不确定如何制作小提琴，因为点击事件来自fullCalendar。
你能至少指定事件吗？ jsfiddle 只需要反映一个最小的例子来复制问题
fullCalendar 中的事件是这样的： eventClick: function (calEvent, jsEvent, view) { var userId = calEvent.user_id; $("#updateEvent #user_id").val(userId).attr("selected","selected"); }
jsfiddle.net/0jo5ahbL/8 这实际上是有效的，所以问题应该在 eventClick from fullcalendar 的某个地方？

标签： javascript jquery forms select

【解决方案1】：

尝试下一个解决方案，因为我不知道“#updateElement”是什么，所以我会忽略它。

var userId = calEvent.user_id;
$("#user_id").val(userId).change();

此外，变量 userId 应保存字符串类型的值，例如：“1”、“2”或“3”。

【讨论】：

#updateElement 用于选择主表单ID。我已经用 change() 尝试过这个选项，但它不适合我。
请检查开发者控制台，可能有错误并且代码不起作用。另外，也可以尝试一个基本测试，例如：$("#user_id").val("3").change();
我正在尝试这个，但也没有改变。当我控制台记录“userId”时，它正在工作。
好的，让我们删除与“日历”相关的所有代码。尝试下一个基本示例来替换您的 $(document).ready(...)。像这样定义这个：$(document).ready(function() {$("#user_id").val("2").change(); $('#updateEvent').modal('open');}); 告诉我如果这工作正常，它应该将选择输入更改为第二个值并打开模式。
它实际上不起作用。也许我应该仔细看看 HTML？

【解决方案2】：

如果您只是尝试为所选框设置用户 ID，并假设，例如，用户 ID 是 #2 在选项列表的值中，那么您需要做的就是这个。

  $("#user_id").val("2");

但是，您的标题表明您不是尝试设置所选选项的值，而是读取所选值。

$("#user_id").on("change", function() {
   console.log("User ID: " +  $("#user_id option:selected").val());
   console.log("User Name: " +  $("#user_id option:selected").text());
});

【讨论】：

对我没有影响。它不是控制台为我记录任何东西。
我的目标是从jQuery中'userId'的相应值的选择选项中显示名称
好的，如果您想为用户 ID #2 显示名称 Jane，那么这就是您所需要的。 ($("#user_id option:selected").text();
我需要在某处告诉价值吗？当我尝试这个时： ($("#updateEvent #user_id option:selected").val(userId).text());它也不起作用。
如果您尝试设置值，则添加参数，如果您尝试读取值，则将其留空。此外，表单 id 是多余的。因为一个 ID 名称在 DOM 中只能存在一次，不像一个可以重复多次的类。

【解决方案3】：

在尝试了很多之后，答案很简单。我不确定是不是因为我使用的是“Materialize”，但我必须在代码中添加“formSelect()”，所以这对我有用：

$("#user_id").val(userId).change();
$("#user_id").formSelect();

【讨论】：