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

【问题标题】：Change dropdown button to radio buttons将下拉按钮更改为单选按钮
【发布时间】：2015-08-06 12:51:36
【问题描述】：

我创建了一个评分系统。我使用了一个下拉按钮从 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>

【问题讨论】：

使用范围滑块可以节省大量时间。
所以您想将下拉列表更改为无线电组，但您不尝试任何代码，只需在此处发布让我们为您完成？

标签： php html drop-down-menu radio-button rate

【解决方案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>

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>

【讨论】：

你好！谢谢您的答复。但是，我不知道把JS放在哪里。真的对不起;我没有任何编程背景，我有一个关于 PHP 的项目。我在哪里将 JS 放在我的代码中？谢谢你！
@Alnira Mei Causing，我已经更新了上面的答案。立即检查。
你好！我很抱歉，但有很多“未定义”。我不确定是不是我。对不起，我真的不知道如何使这项工作。它看起来像我将在@divy3993 下方评论的那个
1 2 3 4 5 6 7 8 9 10 undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined
为什么你把你的 php 代码贴在 body 和 html 标签之外，把代码放在中心标签之间以及文件正文内的中心标签。喜欢this

【解决方案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>

【讨论】：