У меня есть 3 текста в выпадающем списке (основной, опасность, предупреждение), когда я щелкнул один из них, текст будет отображаться на основе выпадающего списка, выбранного с цветом фона, например, я выбираю текст опасности в выпадающем списке, который будет отображать опасность текста с красный фон, как мне сделать это в php, javascript?

https://prnt.sc/qfqx2v https://prnt.sc/qfqx86

у меня есть пример, просто нажмите на ссылку сверху

В вашем CSS вы можете сделать что-то вроде этого:

(если вы используете радио кнопки):

.input[type="radio"]:checked { background-color: blue; } 

(если вы используете раскрывающийся список):

 option:checked { background: red; } 

Вы можете сделать это, используя простой javascript .

JSFiddle Demo

Я положил комментарии в коде для объяснения.

 // 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; } 
 {amp}lt;select name="colors" id="colors"{amp}gt; {amp}lt;option value=""{amp}gt;{amp}lt;/option{amp}gt; {amp}lt;option value="red"{amp}gt;red{amp}lt;/option{amp}gt; {amp}lt;option value="blue"{amp}gt;blue{amp}lt;/option{amp}gt; {amp}lt;option value="green"{amp}gt;green{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

Как вы сказали, выпадающий список, вы можете использовать библиотеку и код wijmo (полноэкранные для проверки фрагментов) и JSfiddle.

 onload = function() { // create some random data var names = 'primary,warning,danger'.split(','), data = []; for (var i = 0; i {amp}lt; 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"); } } } 
 {amp}lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/{amp}gt; {amp}lt;script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;h1{amp}gt; ComboBox {amp}lt;/h1{amp}gt; {amp}lt;label for="theComboString"{amp}gt;Strings:{amp}lt;/label{amp}gt; {amp}lt;div id="theComboString"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;p{amp}gt; The current value is: {amp}lt;b id="theComboStringCurrent"{amp}gt;{amp}lt;/b{amp}gt;. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt;