如何使用 javascript/jquery 在“select”元素上执行函数答案

【问题标题】：How to execute function on 'select` element with javascript/jquery如何使用 javascript/jquery 在“select”元素上执行函数
【发布时间】：2013-11-13 23:40:33
【问题描述】：

我正在尝试设置下拉框的默认值，如下所示：

         <select id="schedule_timeslot" name="timeslot">
            <option name="8-10" class="schedule_time" value="0" id="ts0">8am - 10am</option>
            <option name="10-12" class="schedule_time" value="1" id="ts1">10am-12pm</option>
            <option name="12-2" class="schedule_time" value="2" id="ts2" >12pm - 2pm</option>
            <option name="2-4" class="schedule_time" value="3" id="ts3">2pm - 4pm</option>
            <option name="4-6" class="schedule_time" value="4" id="ts4" >4pm - 6pm</option> 
        </select>

基于如下所示的 URL：

http://localhost:8888/wordpress/wp-admin/admin.php?page=Add_Customer&type=add&id=21&date=11/15/2013&timeslot=d3_0

下拉列表中包含用户在预约时可以选择的时间段。 URL 具有时隙值 (timeslot=d3_0)。为此，我打算将selected="selected" 属性添加到各自的<option>。我遇到的问题是我无法弄清楚如何使用 jQuery 或 JavaScript 对选择执行算法。

我尝试使用一些 jQuery 函数，例如 .load() 和 .on，但所有这些都需要一个事件（单击、鼠标悬停等）。

所以我的问题是，如何在我需要的元素上执行函数？我还应该补充一点，我正在为 Wordpress 创建的插件中执行此操作。

【问题讨论】：

我不清楚 timeslot=d3_0 与 <option> 的对应关系，因为名称和 ID 不一样。
对，如果你在_上拆分值（d3_0），你有0，这确实对应。这是我遇到的问题，因为在选择特定元素并进行调整之前，我需要执行一些其他逻辑。
好的，听起来您希望 Javascript 访问查询字符串并读取它的值。搜索结果如下：stackoverflow.com/questions/647259/javascript-query-string
我知道如何访问字符串，但是谢谢。

标签： javascript jquery wordpress plugins

【解决方案1】：

我不确定我是否完全理解，但请查看以下 jQuery，如果它有帮助请告诉我

//This listens for when a different option is selected
$('select#schedule_timeslot').change(function() {
    var selectedOptionValue = $(this).val();  //0,1,2 .. etc
    var selectedId = $(this).attr("id");
});

以可编程方式选择所需的选项

$('select#schedule_timeslot').val(desiredValueStr);

【讨论】：

谢谢你，但我需要它自己发生，而不是在选择某些东西时发生。
何时自行发生？页面加载时？

【解决方案2】：

不确定我是否正确理解您的问题，但是：

例如，选择默认值 0 会使这个

$( document ).ready(function() {
  $("schedule_timeslot").val("0")
});

编辑 1：

也许是这样的；

  $( document ).ready(function() {

  var qs = GetQSParameterByName("timeslot");

     if(qs !=null){
     $("schedule_timeslot").val(qs ) // your value

     }
});

    // read query string from url
     function GetQSParameterByName(name) {

        var match = RegExp('[?&]' + name.toLowerCase() + '=([^&]*)')
              .exec(window.location.search.toLowerCase() );

        return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }

【讨论】：