Question

我尝试使用js选择下拉值。就我而言，我需要选择＆＃34; DRAW PORTRAIT＆＃34;插件加载后的下拉选项。

我尝试了两种方法，但我没有到达任何地方。这是Bookly WordPress plugin中发现的前端的一部分。我在下拉列表中添加了一个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/

如果有人能纠正我糟糕的代码，我真的很感激。提前谢谢！

Answer 1

首先，我想确定一下。是否要选择下拉列表的值或将值设置为下拉列表？也许这会对你的问题有所帮助。

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

Answer 2

一行jQuery允许您选择必要的项目：

$('#categorydraw option[value="7"').prop("selected", true);

https://jsfiddle.net/fLc1p5mq/

编辑：要在WordPress页面加载时激活，请使用：

jQuery( document ).ready(function() {
  jQuery('#categorydraw option[value="7"').prop("selected", true);
});

使用javascript（Bookly WP Plugin）

2 个答案:

HTML

的JavaScript