如何在焦点上选择 select 值以进行选择？

Question

我想将 select 值放在selectize的焦点上。

此时，我可以单击并删除该值，但我希望单击（焦点）应该 select 选择元素的所有值字符串。

您可以在创建新活动时看到 Google 日历的工作原理。

在我这边，如果我单击时间选择元素，那么它应该 select 所有值字符串，并且可以使用新字符串（如 Google）删除或更新选择。

我的时间选择元素如下。

// php
<div class="select-beast is-hide-selectize-arrow select-event-time-end">
    <select name='event_time_end' class='control is-normal select-time' required>
         <?php echo TimeHelper::get_times(); ?>
    </select>
</div>

// php
function get_times ($default = '19:00', $interval = '+30 minutes') {

    $output = '';

    $current = strtotime('00:00');
    $end = strtotime('23:59');

    while ($current <= $end) {
        $time = date('H:i', $current);
        $sel = ($time == $default) ? ' selected' : '';

        $output .= "<option value=\"{$time}\"{$sel}>" . date('h:i A', $current) .'</option>';
        $current = strtotime($interval, $current);
    }

    return $output;
}

...
//jquery
<script>
    const $selected_time_start = $('.select-beast select[name="event_time_start"]').selectize({
         create: true
    });

    const selectize_event_start = $selected_time_start[0].selectize;
</script>

我尝试的是使用焦点事件和select 方法，如下所示。 但它没有用。

$('.select-beast select[name="event_time_start"]').focus(function() { $(this).select(); } );

Answer 1

经过3个多小时的研究，我找到了最相关的答案。

我需要将选择版本更新为最新版本并使用select_on_focus插件。

插件在这里。 https://github.com/selectize/selectize.js/tree/master/src/plugins/select_on_focus

如何使用：

如果您使用的是 jQuery，则可以使用selectize的独立版本。

...
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" rel="stylesheet">
</head>
<body>
  ...
  <select class="selectize"></select>
  ...
</body>
<script>
  const $selectize = $('.selectize').selectize({
    options: options,
    plugins: ['select_on_focus'],
    ...
  });
</script>

你知道如何导入插件，对吧？

如何在焦点上选择 select 值以进行选择？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-03-05 17:58:02

如何在焦点上选择 select 值以进行选择？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-03-05 17:58:02

解决方案1
0 已采纳 2021-03-05 17:58:02