How to change dropdown values using radiobutton

Question

I want to change the dropdown values when changing the radio button and defaultly I want to check one radio button and show corresponding values

My code is here:

<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) {

    }

    %>

own values

Here you can see two options having two result set with values coming from database, I want the first option as Default dropdown value and first radio button as checked , if i click second radio button i want to change the drop d

What about rendered HTML (what browsers "sees") instead of this mix of PHP and HTML? — Regent, Oct 07 '14 at 14:42
a better way is isolate your php code from html, and call it through ajax — Savrige, Oct 07 '14 at 14:47
You have only one radio button in code , where is second one? — K.D, Oct 07 '14 at 14:47
you wanted to show select options based on your radio button ?then why dnt you use DWR — Divya, Oct 07 '14 at 14:53
@giorgio it looks like Java code for me (I hope it is really Java, isn't it?), ok, but I still want to see rendered HTML :) Even though it looks like OP doesn't try anything by himself. — Regent, Oct 07 '14 at 14:54

score 1 · Answer 1 · answered Oct 07 '14 at 22:35

This answer will not be technically correct because I don't know jsp, I know PHP. So, my concat strings etc will be a mish-mash of jsp/PHP. However, it is now two hours after the question was asked and there are no other answers, so I will offer the help I can. I am sure you can "translate" my response as required.

First -- and this is very important when asking questions on SO -- make your code as readable as possible. Start by formatting (indenting) your code correctly.

Also, remove the inline css. Create a <style></style> block within the page's <head> tags and stick all styles in there. Makes it much more readable. Instead of this:

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

Do this:

<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">

Next, as much as possible, isolate your server-side code from your HTML. For example, you can build the SELECT controls at the top of the file, and echo out the completed SELECT where it belongs, all at once. Like this:

<%
    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) {

    }
%>

Then, echo the PHP (or jsp or whatever) variable where it belongs:

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

For changing the select values when a radio button changes, please see these examples for a starter:

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

Here is a code example of setting the SELECT value from the RADIO BUTTON value:

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);
});

i check this ,but the option values are dynamic and it is coming from database also it is stored in a resultset — ram, Oct 08 '14 at 01:27
@ram it really doesn't matter if values are dynamic or not. As soon as you have rendered html, which if a browser is concerned is just a static page, the only thing you need is javascript. Please try to work with the excellent answer gibberish gave you, and ask a proper question (as your comment is just a remark, although you insinuate you want more help...) — giorgio, Oct 08 '14 at 08:27
@ram It is now many hours later and you have not made the code in your question more readable. Please cut the code from the question and use something like Notepad++ to format it (remove double spacing, use correct indenting like I did in my answer) before pasting it back into the question. *When you ask other people to spend their time solving your puzzle (which we are happy to do!), please make the task as easy as possible for us.)* — cssyphus, Oct 08 '14 at 15:39
@ram If the options are dynamic and depend on a user's choice in a select box, you should use AJAX. It is much much easier than you might think. [**Browse this post**](http://stackoverflow.com/questions/18724011/post-not-posting-data/18724684#18724684), but study at the examples at the very bottom. They will show you exactly how to do it. — cssyphus, Oct 08 '14 at 15:45

How to change dropdown values using radiobutton

1 Answers1