Question

我创建了一个评级系统。我使用下拉按钮从1-10中选择率。我想将此下拉按钮更改为单选按钮，以便让观看者更容易进行评分。你能帮助我吗？这是我的代码。

<html>
<head>
<title> Rate error solutions </title>
</head>
<body>

<br><br>
<div align="right">
<a href="logout.php">Logout</a></div>
<div align="center">

<img src="590px-HGST_CompanyLogo.svg.png" alt="Home" style="width:300;height:100"></div>
<br><br><br>
<center><b><font size="5"> RATE</font><br><br>
Note:</b> 10 = highest, 1 = lowest  </center><br>
<hr width='40%'>
<br>
</body>
</html>

<center>

<?php
    mysql_connect ("localhost", "root", "") or die ("Can't connect to server.");
    mysql_select_db ("ojt") or die ("Can't connect to database.");

    $find_data = mysql_query ("SELECT * FROM search");


    while ($row = mysql_fetch_assoc($find_data))
    {

        $id = $row['id'];
        $title = $row['title'];
        $error = $row['error'];
        $description = $row['description'];
        $keywords = $row['keywords'];
        $link = $row['link'];
        $current_rating = $row['rating'];
        $hits = $row['hits'];


        echo "
            <form action='rate.php' method='POST'>
                <b>Error title: <u>$title</u> </b><br>
                Rate error solution: <select name = 'rating'>

                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>

                </select>
                <input type='hidden' value='$error' name='error'><br>
                <input type='submit' value='Rate!'><br><br>Current rating: "; echo round($current_rating,4); echo "


            <br><br></form><hr width='30%'><br>
        ";
        }




?>
</center>

Answer 1

我认为这就是你要找的东西：

WORKING:DEMO

<强> HTML

<select name='rating'>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>

<p id="rdb"></p>

<强> JS

var num = $("option").length; /*Check num of Option Tags*/
$("select").hide(); /* Remove this and you will find Select box */
for(var i=1; i<=num; i++)
{
    var nums = ['0','1','2','3','4','5','6','7','8','9','10'];
    var ptag = document.getElementsByTagName("p")[0];    
    var input = document.createElement("INPUT");
    input.setAttribute("type", "radio");
    var cellText = document.createTextNode(" " + nums[i] + " ");
    var label = parseInt(i);
    ptag.appendChild(cellText);
    ptag.appendChild(input);
}

您的HTML文件必须如下所示：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<select name='rating'>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<p id="rdb"></p>
<script>
$(document).ready(function(){
var num = $("option").length; /*Check num of Option Tags*/
$("select").hide(); /* Remove this and you will find Select box */
for(var i=1; i<=num; i++)
{
    var nums = ['0','1','2','3','4','5','6','7','8','9','10'];
    var ptag = document.getElementsByTagName("p")[0];    
    var input = document.createElement("INPUT");
    input.setAttribute("type", "radio");
    var cellText = document.createTextNode(" " + nums[i] + " ");
    var label = parseInt(i);
    ptag.appendChild(cellText);
    ptag.appendChild(input);
}
});
</script>
</body>
</html>

Answer 2

@ divy3993

这就是我的所作所为。如果我没有得到它，我真的很抱歉，谢谢你给我你的时间：

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<title> Rate error solutions </title>
</head>
<body>

<br><br>
<div align="right">
<a href="logout.php">Logout</a></div>
<div align="center">

<img src="590px-HGST_CompanyLogo.svg.png" alt="Home" style="width:300;height:100"></div>
<br><br><br>
<center><b><font size="5"> RATE</font><br><br>
Note:</b> 10 = highest, 1 = lowest  </center><br>
<hr width='40%'>
<br>
</body>
</html>

<center>

<?php
    mysql_connect ("localhost", "root", "") or die ("Can't connect to server.");
    mysql_select_db ("ojt") or die ("Can't connect to database.");

    $find_data = mysql_query ("SELECT * FROM search");


    while ($row = mysql_fetch_assoc($find_data))
    {

        $id = $row['id'];
        $title = $row['title'];
        $error = $row['error'];
        $description = $row['description'];
        $keywords = $row['keywords'];
        $link = $row['link'];
        $current_rating = $row['rating'];
        $hits = $row['hits'];


        echo "
            <form action='rate.php' method='POST'>
                <b>Error title: <u>$title</u> </b><br>
                Rate error solution: <select name = 'rating'>

                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>

                </select>

                <p id='rdb'></p>
                <script>
                $(document).ready(function(){
                var num = $('option').length;
                $('select').hide(); 
                for(var i=1; i<=num; i++)
                {
                    var nums = ['0','1','2','3','4','5','6','7','8','9','10'];
                    var ptag = document.getElementsByTagName('p')[0];    
                    var input = document.createElement('INPUT');
                    input.setAttribute('type', 'radio');
                    var cellText = document.createTextNode('' + nums[i] + '');
                    var label = parseInt(i);
                    ptag.appendChild(cellText);
                    ptag.appendChild(input);
                }
                });
                </script>
                <input type='hidden' value='$error' name='error'><br>
                <input type='submit' value='Rate!'><br><br>Current rating: "; echo round($current_rating,4); echo "


            <br><br></form><hr width='30%'><br>
        ";
        }




?>
</center>

将下拉按钮更改为单选按钮

2 个答案: