0

如何<div>在不同的下拉选择中使用数据库值更改背景颜色？我认为自己进行了广泛的搜索，并从以前的帖子中找到了一些很好的信息，但还不能完全融入我的代码中。

这是我的任务：我有一个包含各种温度的下拉列表。每个 temp 在数据库中都有一个特定的颜色代码，以便分配给<div>.

例如，99 度会给我一个黄色背景，或者 105 度会给我一个橙色背景。

这是当前代码：下拉菜单页面

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Alert Test</title>
    <meta/>
  </head>
  <body>
    <p>
    Page copy
    </p>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction_1(){
    var ajaxRequest;

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Oops! We apologize.");
                return false;
            }
        }
    }
    ajaxRequest.onreadystatechange = function (){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv_4');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var temp = document.getElementById('temp').value;
    var queryString = "?temp=" + temp;
    ajaxRequest.open("GET", "abc.php"+ queryString, true);
    ajaxRequest.send(null); 
}
//-->
            </script>
<form>
<br />
<select id='temp'>
<option value=''>Choose Product</option>
<option value='90'>90</option>
<option value='91'>91</option>
<option value='92'>92</option>
<option value='93'>93</option>
<option value='94'>94</option>
<option value='95'>95</option>
<option value='96'>96</option>
<option value='97'>97</option>
<option value='98'>98</option>
<option value='99'>99</option>
<option value='100'>100</option>
<option value='101'>101</option>
<option value='102'>102</option>
<option value='103'>103</option>
<option value='104'>104</option>
<option value='105'>105</option>
<option value='106'>106</option>
<option value='107'>107</option>
<option value='108'>108</option>
<option value='109'>109</option>
<option value='110'>110</option>
<option value='111'>111</option>
<option value='112'>112</option>
<option value='113'>113</option>
</select>
<input type='button' onclick='ajaxFunction_1()' value='Select' />
        </form>
            <div id='ajaxDiv_4'></div>
            </body>
</html>

这是调用数据库的代码

<?php
include_once('conn.php');
// Retrieve data
if( isset($_GET['temp']) && $_GET['temp'] != '' ){
  $temp = $_GET['temp'];
  $temp = mysql_real_escape_string($temp);
  //query
  $query = "SELECT * FROM temps WHERE temp = '$temp'";
  //Execute
  $qry_result = mysql_query($query) or die(mysql_error());

  while($row = mysql_fetch_array($qry_result)){
    $display_string = '<strong>WARNING</strong> '.$row['alert'].'<br>';
    $display_string .= '<strong>BE AWARE</strong> '.$row['messa'].'<br>';
    $display_string .= '<strong>RESPONSE</strong> '.$row['action'].'<br>';
    $display_string .= '<br>';
  }
  echo $display_string;
} else {
  return null;
}
?>

下拉和页面效果很好。只需要添加一些颜色即可完成。提前感谢您的帮助。

4

2 回答 2

0

与其在用户更改下拉菜单时进行 AJAX 调用，不如option使用已知颜色呈现元素，例如：

<option value='104' data-color='yellow'>104</option>

然后在您的点击处理程序中，您可以从那里获取值。

于 2013-09-25T19:30:21.067 回答
0

我通常做这些事情的方式是 css 和 jquery 的混合，我为 temprature 定义 css 类，如：

.temp1{background-color: red}
.temp2{background-color: blue}

然后在获取温度后，javascript和jquery使用addClass()andremoveClass()函数完成其余的工作，并具有一些逻辑：

if(temprature>90)temp=1;
else if(temprature>75)temp=2;
$('ajaxDiv_4').addClass('temp'+temp);

或者用这个替换while循环：

if($temp>100)$class = temp1;
  else if($temp>80)$class = temp2;
  else $class = temp3;
  while($row = mysql_fetch_array($qry_result)){
    $display_string = '<strong class='.$class.'>WARNING</strong> '.$row['alert'].'<br/>';
    $display_string .= '<strong class='.$class.'>BE AWARE</strong> '.$row['messa'].'<br/>';
    $display_string .= '<strong class='.$class.'>RESPONSE</strong> '.$row['action'].'<br/>';
    $display_string .= '<br/>';
  }
于 2013-09-25T19:31:57.630 回答