Question

你能帮助我吗？..我希望我的下拉更改它的风格如果用户选择任何选项要么使下拉选择对象文本变为红色或使下拉本身变成红色而不是默认蓝色所以用户不能confius，可以注意到下拉选择或更改，如果他错过任何下拉，可以区分。在我的情况下，用户需要选择所有下拉列表。

我的逻辑是：如果下拉列表未更改或值不是0，那么 - ＆gt;显示要下拉的内容，以便用户注意下拉列表已经更改或评级

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

您可以在此处查看我的下拉菜单： 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

您需要让用户操作来更改下拉列表的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 2

使用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>

类似这样的事情

Answer 3

请参阅 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>

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

3 个答案: