Question

我有一个下拉菜单，用户可以在其中选择版本号，并且基于用户是否选择版本，我想更改卡上显示的内容。我将下面所有当前代码都包括在内，我想做的是，当用户从下拉菜单中选择一个值时，我将调用要显示的其他值。

非常感谢您的帮助。

以下是选择器的HTML：

<div class="card-header clearfix">
<select name="version[]" id="version" class="icon-menu" onchange="reDrawChart()">
    <option selected="selected" disabled="true">--Please Select --</option>
</select>

这是与选择器一起使用的javascript：

<script type="text/javascript">
function loadDropdownMenu() {
    jQuery.ajax({
        method: "POST",
        dataType: "JSON",
        url: "http://localhost/dropDownMenu.php",
        success: function(data) {
            var arr = new Array();
            var name = new Array();

            var select = document.getElementById("version");
            for (i = 0; i < data.length; i++) {
                arr[i] = [data[i].version_id];
            }
            for (i = 0; i < data.length; i++) {
                name[i] = [data[i].full_version_name];
            }

            for (var i = 0; i < arr.length; i++) {
                var option = document.createElement("OPTION"),
                    txt = document.createTextNode(name[i]);
                option.appendChild(txt);
                option.setAttribute("value", arr[i]);
                select.insertBefore(option, select.lastChild);
            }
        }
    });
}
loadDropdownMenu();

最后，这是当前正在显示的卡的代码：

    <div class="card text-white bg-primary o-hidden h-100">
        <a class="card-header text-white clearfix small z-1" href="#">
            <span class="float-left">COX Sanity Run </span>
        </a>
        <div class="card-body">
            <div class="card-body-icon">
                <i class="fa fa-fw fa-tasks"></i>
            </div>
            <div id="coxTotal" class="mr-5"></div>
            <div id="coxFailed" class="mr-5"></div>
            <div id="coxPassed" class="mr-5"></div>
            <div id="coxRunTime" class="mr-5"></div>
        </div>

        <a class="card-footer text-white clearfix small z-1" href="www.toBeChanged.com" id="coxUrl">
            <span class="float-left">View Details</span>
            <span class="float-right">
  <i class="fa fa-angle-right"></i>
  </span>
        </a>
    </div>

HTML / Bootstrap中的IF ELSE语句

0 个答案: