PHP：如果选择了下拉选项，则更改下拉样式或外观

Question

你能帮我吗？..如果用户选择任何选项，我希望我的下拉菜单改变它的样式，要么使下拉选择对象文本变为红色，要么使下拉菜单本身变为红色而不是默认的蓝色，因此用户不能confius ，可以注意到下拉列表被选中或更改，并且可以区分是否错过了任何下拉列表。在我的情况下，用户需要选择所有下拉菜单。

我的逻辑是：如果下拉列表没有改变或者值不是 0，那么 -> 显示一些下拉列表，让用户注意到下拉列表已经改变或评级

或者如果用户选择任何下拉菜单，则将某些内容更改为下拉菜单外观或样式

您可以在此处查看我的下拉列表： https://docs.google.com/document/d/1ljW8PVjKQC4FMqFPU54uNbiuVqOmi6G-0JPCucinqME/pub

我的下拉代码将根据 MySQL 中的问题数量进行循环。如果有 2 个问题，则 drpdown 将显示 2：

    while($row = mysql_fetch_array($Result))
    {   
         <td class='section2' id='self_assess_staff'>
              <select id='self_assess_staff' name='self_assess[]'>
                 <option value='0' selected>-</option>
                 <option value='1' width='2px'>1</option>
                 <option value='2'>2</option>
                 <option value='3'>3</option> 
                 <option value='4'>4</option>
                 <option value='5'>5</option>
             </select>
         </td>
    }
echo "    </tbody> 
                </div></div>
                <tr><td></td<td></td><td></td><td></td><td></td><td></td><td align='right'><button id='EditSubmit1' onclick='checkbox();'>Submit Data</button></td></tr>
                </table>";  
            }

因为你们要我的javascript：

<script type="text/javascript">
$(document).ready(function() {

    $("#EditSubmit1").click(function (e) {
            e.preventDefault();     

            var self_assess_check = $("select[name='self_assess[]'] option:selected").map(function() {
            return $(this).text();
            }).get();

            //alert(self_assess_check);

            if ($.inArray('-', self_assess_check) != -1) {
                alert("Please Make Sure All Question Have been rate");
                return false;
            } else {
                var r = confirm("Make sure all answer is correct. Once Submit it cannot be changed");
                if (r == true) {
                } else {
                return false;
                }
            } 

            var self_assess = $("select[name='self_assess[]'] option:selected").map(function() {
            return $(this).text();
            }).get();

             alert(self_assess);

            var JsonData = {self_assess: self_assess,};  

            jQuery.ajax({
            type: "POST", // Post Get method
            url: "answer_response.php", //Where form data is sent on submission
            dataType:"text", // Data type, HTML, json etc.
            data:JsonData, //Form variables
            success:function(response){     

                $("#contentLeft").append(response);

            alert("Your Data Have Been Recorded");
                window.location.reload(true);   // reload after append  
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }
            }); 
    });

            $("#CancelSubmit").click(function (e) {
            e.preventDefault(); 
            window.location.reload(true);                   
            });

    });
</script>

Answer 1

看到这个DEMO

编辑：

  $("#button1").on("click", function(){
    var flag=true;
    $("select").each(function(){
        if($(this).val()=="0")
            $(this).addClass("err");
    }).on("change", function(){
        if($(this).val()!="0")
            $(this).addClass("ok").removeClass("err");
        else
            $(this).addClass("err").removeClass("ok");
    });

});

用 php 创建动态下拉菜单：

<select id='self_assess_staff' name='self_assess[]'>
while($row = mysql_fetch_array($Result))
{ 
   $selected = (a condition)? "selected=selected":""; //If it have 2 question     
   echo "<option ".$selected." value='".$row["value"]."'>".$row["value"]."</option>";
}
</select>

Answer 2

您需要通过下拉菜单的 onchange 事件获取用户操作来更改样式

<select id='self_assess_staff' name='self_assess[]' onchange="change_style();">
             <option value='0' selected>-</option>
             <option value='1' width='2px'>1</option>
             <option value='2'>2</option>
             <option value='3'>3</option> 
             <option value='4'>4</option>
             <option value='5'>5</option>
         </select>

编写javascript函数

function change_style()
{
   //now with the id "self_assess_staff" you can change any style attribute of 0the dropdown
document.getElementById('self_assess_staff').style.attribute='whatever you want';//this is for changing an attiribute
document.getElementById('self_assess_staff').className='whatever you want';//this is to change the class name 
}

Answer 3

使用 javascript 并为您的代码创建一个 onchange 操作

     <select id='self_assess_staff' name='self_assess[]' onchange='jsAction(this)'>
                 <option value='0' selected>-</option>
                 <option value='1' width='2px'>1</option>
                 <option value='2'>2</option>
                 <option value='3'>3</option> 
                 <option value='4'>4</option>
                 <option value='5'>5</option>
             </select>

    //js
    <script>
    function jsAction(val){
     alert(val.text);
    }
</script>

类似的东西