时间戳

首页 > 解决方案 > 使用 javascript (Bookly WP 插件) 选择一个下拉值

javascript - 使用 javascript (Bookly WP 插件) 选择一个下拉值

问题描述

我正在尝试使用 js 选择一个下拉值。就我而言，我需要在插件加载后选择“DRAW PORTRAIT”下拉选项。

我尝试了两种方法，但我没有得到任何地方。这是Bookly WordPress 插件中前端的一部分。我在下拉列表中添加了一个 id id="category"，以便我可以选择一个值。

HTML：

<div class="bookly-js-chain-item bookly-table bookly-box" style="display: table;">
           <div class="bookly-form-group">
                <label>Service Type</label>
                <div>
                <select id="categorydraw" class="bookly-select-mobile bookly-js-select-category">
                        <option value="">Select category</option>
                    <option value="6">DRAW PORTRAIT</option>
                    <option value="7">DRAW DUMMY FIGURE</option>
                    <option value="8">DESIGN WAX SCULPTURE</option></select>
                </div>
            </div>
 </div>

方法01

document.getElementById("categorydraw").value = "DRAW PORTRAIT";

方法02

var objSelect = document.getElementById("categorydraw");

setSelectedValue(objSelect, "DRAW PORTRAIT");

function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].text== valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}

请查看 js 不起作用的完整代码：https ://jsfiddle.net/3z5hcv62/

如果有人能纠正我胡思乱想的代码，我将不胜感激。提前致谢！

标签： javascriptwordpress

解决方案

首先，我想确定。您要选择下拉列表的值还是将值设置为下拉列表？也许这会帮助你解决问题。

HTML

<!-- I set the "categories" id to the dropdown -->
<select class="bookly-select-mobile bookly-js-select-category" id="categories">
    <option value="">Select category</option>
    <option value="1">Cosmetic Dentistry</option>
    <option value="2">Invisalign</option>
    <option value="3">Orthodontics</option>
    <option value="4">Dentures</option>
</select>

<p>
  Selected value: <strong id="selected"></strong>
</p>

JavaScript

var dropdown = document.getElementById('categories');
var datas = [];
var select = 3;

/* Get value with text from dropdown */
for(var i=0;i<dropdown.options.length;i++) {
    datas.push({
        id: dropdown.options[i].value,
    text: dropdown.options[i].text,
    });
}

/* For set the value */
dropdown.value = select; // after page loaded,, default value will selected is "Orthodontics"

/* For select current value with the text */
var dataSelected = datas[select];
document.getElementById('selected').innerHTML = "ID: "+dataSelected.id+", TEXT: "+dataSelected.text;

结果将显示如下https://jsfiddle.net/65jnzLko/1/

您可以改进该代码。就像通过下拉值的 id 选择数据一样。

或者，如果您只想为下拉菜单设置值，您可以这样做

// using pure js
document.getElementById('yourdropdown').value = 3 // or other values

// using jquery
$("#yourdropdown").val(5) // 5 can replace with other values

推荐阅读