如何使用单选按钮更改下拉列表值

时间:2014-10-07 14:40:57

标签: javascript jquery html jsp

我想在更改单选按钮时更改下拉列表值,默认情况下我想检查一个单选按钮并显示相应的值

我的代码在这里:

<td>  

<input type="radio"  name="status" style="width:1em;height:1em;margin:0.8em 0 0 0" value="false" id="idPdf" />

    <label  style="width:4em">Parcel</label></td>    

  <input type="radio"  name="status" style="width:1em;height:1em;margin:0.8em 0 0 0" value="true" id="idPdf" checked="checked"/>

    <label  style="width:4em">Table</label></td>

    <td>   <input type="radio" name="status" style="width:1em;height:1em;margin:0.8em 0 0 0" value="false" id="idExcel"/>

    <label style="width:4em">Parcel</label></td></tr> 

    <tr style="background-color: #ebf4fb;">

    <td><label  style="width:7em">Table Num:</label></td>

    <td> <select name="txtTableNum" id="idSelectTable"  style="width: 150px; height: 25px;"  >

    <option style="font-weight: bold; color:#000000; width: 100px; height: 25px; ">Select</option>

    <%

    try {

     DBConnection dbConn = new DBConnection();

    conn1 = dbConn.getConnection();

    st1 = conn1.createStatement();

    rs1 = st1.executeQuery("select distinct(order_table_no) from order_master where bill_no='0' and order_table_no like 'Table%' ");

    while (rs1.next()) {

    %>

    <option style="font-weight: bold; color:#000000; width: 100px; height: 25px; " ><%=rs1.getString(1)%></option>

    <%

    }

    rs5=st1.executeQuery("select distinct(order_table_no) from order_master where bill_no='0' and order_table_no like 'Parcel%' ");

     while (rs5.next()) {

    %>

    <option style="font-weight: bold; color:#000000; width: 100px; height: 25px; "><%=rs5.getString(1)%></option>

     <%

    }

    } catch (Exception e) {

    }

    %>

自己的价值

在这里,您可以看到两个选项,其中两个结果集的值来自数据库,我希望第一个选项为默认下拉值,第一个单选按钮选中,如果我单击第二个单选按钮我想更改下降d

1 个答案:

答案 0 :(得分:1)

这个答案在技术上是不正确的,因为我不了解jsp,我知道PHP。所以,我的concat字符串等将是jsp / PHP的混搭。但是,现在提出问题已经过了两个小时,没有其他答案,所以我会提供帮助。我相信你可以&#34;翻译&#34;我的回复是必要的。

首先 - 在提问问题时这非常重要 - 让您的代码尽可能可读。首先正确格式化(缩进)您的代码。

另外,删除内联css。在页面的<style></style>标记中创建<head>块,并将所有样式粘贴在其中。使其更具可读性。而不是:

<select name="txtTableNum" id="idSelectTable"  style="width: 150px; height: 25px;"  >

这样做:

<style>
    #idSelectTable{width:150px; height:25px;}
    .opt1{font-weight:bold;color:#000;width:100px;height:25px;}
    .opt2{font-weight:bold;color:#00F;width:100px;height:25px;}
</style>
<select name="txtTableNum" id="idSelectTable" class="opt1">

接下来,尽可能将服务器端代码与HTML隔离。例如,您可以在文件的顶部构建SELECT控件,并一次性回显它所属的已完成的SELECT。像这样:

<%
    try {
        DBConnection dbConn = new DBConnection();
        conn1 = dbConn.getConnection();
        st1 = conn1.createStatement();
        rs1 = st1.executeQuery("select distinct(order_table_no) from order_master where bill_no='0' and order_table_no like 'Table%' ");
        rs5 = st1.executeQuery("select distinct(order_table_no) from order_master where bill_no='0' and order_table_no like 'Parcel%' ");

        $mySelect = '
            <select name="txtTableNum" id="idSelectTable">
                <option class="opt1">Select</option>
            ';

        while (rs1.next()) {
            $mySelect .= '<option class="opt2">' . =rs1.getString(1) . '</option>';
        }

        $mySelect .= '</select>';

    } catch (Exception e) {

    }
%>

然后,回显它所属的PHP(或jsp或其他)变量:

<table>
    <tr>
        <td>Radio Buttons</td>
        <td>Select Control</td>
    </tr>
    <tr>
        <td> <?php echo $myradios; ?> </td>
        <td> <?php echo $myselect; ?> </td>
    </tr>
</table>

要在单选按钮更改时更改选择值,请参阅以下示例以获取启动器:

http://learn.jquery.com/about-jquery/how-jquery-works/


以下是从RADIO BUTTON值设置SELECT值的代码示例:

jsFiddle Demo

<强> HTML:

<input type="radio" id="rad_cat" name="animal" /> Cat<br />
<input type="radio" id="rad_dog" name="animal" /> Dog<br />
<input type="radio" id="rad_cow" name="animal" /> Cow<br />
<input type="radio" id="rad_rat" name="animal" /> Rat<br />
<br />
<select id="mysel">
    <option value="none">Choose One</option>
    <option value="rad_cat">Garfield</option>
    <option value="rad_dog">Snoopy</option>
    <option value="rad_cow">Clarabell</option>
    <option value="rad_rat">Ratbert</option>
</select>

<强> jQuery的:

$('input[type=radio]').click(function(){
    var anitype = this.id;
    $('#mysel').val(anitype);
});