当我在 php javascript 中选择组合框的内容之一时，如何显示带有彩色背景的文本

Question

当我单击其中一个时，我在组合框中有 3 个文本（主要、危险、警告），文本将根据使用背景颜色选择的组合框显示，例如，我在组合框中选择危险文本，将显示文本危险红色背景，我如何在 php、javascript 中制作它？https://prnt.sc/qfqx2v https://prnt.sc/qfqx86我有示例只需单击顶部的链接

Answer 1

正如您所说的组合框，您可以使用wijmo库和代码（全屏测试片段）和JSfiddle

onload = function() {

  // create some random data

  var names = 'primary,warning,danger'.split(','),

    data = [];

  for (var i = 0; i < names.length; i++) {

    data.push({

      name: names[i]

    });

  }

  var theComboString = new wijmo.input.ComboBox('#theComboString', {

    selectedIndexChanged: function(s, e) {

        setText('theComboStringCurrent', s.text);

    },

    itemsSource: names

    });

 

    // show text in an element on the page

  function setText(id, value) {

    document.getElementById(id).textContent = value;

    if(value=="primary")

    {

    $("#theComboString").css("background-color","green");

    }

    if(value=="danger")

    {

    $("#theComboString").css("background-color","red");

    }

     if(value=="warning")

    {

    $("#theComboString").css("background-color","orange");

    }

  }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>

<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>

<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>

<div class="container">

  <h1>

    ComboBox

  </h1>

  <label for="theComboString">Strings:</label>

  <div id="theComboString"></div>

  <p>

    The current value is: <b id="theComboStringCurrent"></b>.

  </p>

</div>

Answer 2

在您的 CSS 中，您可以执行以下操作：

（如果您使用单选按钮）：

.input[type="radio"]:checked {

   background-color: blue;

}

（如果您使用下拉菜单）：

option:checked {

  background: red;

}

Answer 3

您可以使用 plain 来做到这一点javascript。

我在代码中添加注释以进行解释。

// Select the dropdown color selector.

var colorSelect = document.querySelector("#colors");

// Add a function to run, each time a new option(color) is selected.'

colorSelect.addEventListener("change", changeColor);

// Run the function from the previous event listener.

// The function get the color with "this.value", where this is the selected value. 

// This works since each option has a value in the markup, otherwise you had to get the text value.

// Then it sets the background color of the body to the selected color.

function changeColor() {

    var selectedValue = this.value;

    document.body.style.backgroundColor = selectedValue;

}

<select name="colors" id="colors">

  <option value=""></option>

  <option value="red">red</option>

  <option value="blue">blue</option>

  <option value="green">green</option>

</select>

更新的答案

var box = document.querySelector(".box");

var colorSelect = document.querySelector("#colors");

colorSelect.addEventListener("change", changeColor);

function changeColor() {

  var selectedColor = this.value;

  var selectedType = colorSelect.options[colorSelect.selectedIndex].text;

  box.style.backgroundColor = selectedColor;

  box.innerHTML = selectedType;

}

.box {

  height: 20px;

  width: 200px;

}

<div class="box"></div>

<select name="colors" id="colors">

  <option value=""></option>

  <option value="red">Danger</option>

  <option value="yellow">Warning</option>

  <option value="green">Success</option>

</select>