Here’s what I’m trying to do: You open the page and there’s a select

Question

0

Asked: May 26, 20262026-05-26T15:57:55+00:00 2026-05-26T15:57:55+00:00

Here’s what I’m trying to do: You open the page and there’s a select

0

Here’s what I’m trying to do:
You open the page and there’s a select box where you choose option A, another select box, option B, appears and shows options depending on what option the user chose for A.

I managed to get this far with a little help, but I want to customise the select box and the only way I could find a way to do that which supports the onchange callback was implementing jQueryUI. I can get it to make option B appear, but it wont change the options.

Here’s the (very messy) code I have so far:

  <head>
    <meta content='text/html; charset=utf-8' http-equiv='content-type' />
    <title>Jailbreak</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link href="scripts/reset.css" rel="stylesheet" type="text/css" />
    <link href="scripts/styles.css" rel="stylesheet" type="text/css" />
    <link rel="Stylesheet" href="scripts/jquery-ui.css" type="text/css">
    <link rel="Stylesheet" href="scripts/ui.css" type="text/css">
    <script type="text/javascript" src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("select[name='select1']").selectmenu();
        $("select[name='select2']").selectmenu();   
    });
    </script>
</head>
<body>
<script>
function Select1(){
    var phoneselect=document.getElementById("select1");
    var phoneid = phoneselect.options[phoneselect.selectedIndex].value;
    if( phoneid == 'p1' ){
    document.getElementById( 'select2' ).length=0;
    document.getElementById( 'select2' )[0]=new Option("1.1", "1.1", true, false);
    document.getElementById( 'select2' )[1]=new Option("1.2", "1.2", false, false);
    document.getElementById( 'select2' )[2]=new Option("1.3", "1.3", false, false);
    }
    else if(phoneid == 'p2' ){
    document.getElementById( 'select2' ).length=0;
    document.getElementById( 'select2' )[0]=new Option("1.2", "1.2", true, false);
    document.getElementById( 'select2' )[1]=new Option("1.3", "1.3", false, false);
    document.getElementById( 'select2' )[2]=new Option("1.4", "1.4", false, false);
    }
    $('#fwselector').show('slow', function() {
        });
}
</script>
<div id="mainimg"><img src="images/devices.png"/></div>
<div id="formcontainer">
    <form>
        <select id="select1" name="select1" onchange="Select1();">
            <option value="Phone" disabled="disabled" >Phone</option>
            <option value="p1">iPhone 2G</option>
            <option value="p2">iPhone 3G</option>
            <option value="p3">iPhone 3GS</option>
            <option value="p4">iPhone 4</option>
            <option value="p5">iPhone 4S</option>
        </select>
    </form>
    <div id="fwselector" style="display: none">
        <select  name="select2" id="select2">
            <option value="Firmware" disabled="disabled" selected="selected">Firmware</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</div>

</body>
</html>

I should mention that I’m not very familiar with anything other that HTML or CSS at all, I’ve just done this by merging things together from loads of different guides.

Thanks.