Reputation: 23290

Change select menu options on the fly

My signup for looks like that:

<input type="radio" value="a">a
<input type="radio" value="b">b


<select name="group">
<?php
for ($i=1; $i<=4; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>

What I wanna do is, if selected a, "group" select menu options will be, in range [1;4], if selected b then [5;9]. How to change php on the fly? is it possible with js?

Upvotes: 3

Answers (6)

ShankarSangoli

Reputation: 69915

First of all the radio buttons should be give a common name so that they will work a radio buttons.

Markup change

<input type="radio" name="selectGroup" value="a">a
<input type="radio" name="selectGroup" value="b">b

$(function(){

   $("input[name=selectGroup]").change(function(){
      var $select = $("select[name=group");
      var start = $("input[name=selectGroup]:checked").val() == "a"?1:4;
      var end = start + 4;
      $select.empty();
      for(;start < end;start++){
        $select.append("<option value='"+start+"'>"+start+"</option");
      }
   });


});

Upvotes: 2

Kalle H. Väravas

Reputation: 3615

Ok, if you must use PHP for your project, then I would use two select menus. You can use jQuery to edit your current select menu..but you probably need to use PHP to get the select menus values... So this way you can preload the select menus easily in PHP and use jQuery to hide the inactive select menu, based on the radio buttons.

Live example of the jQuery action

Live example of jQuery with PHP

Notes:

Your radio buttons didn't have name="" parameters, technically in a form, they are not valid and wont work.
I added the document ready() part, so you can have the option of not displaying any select menus on load.. Simply remove the checked from the first radiobutton and then none of the select menus will be displayed on the first load.
You don't need to use value="'.$i.'" in your option, if in the option you already have the value. Meaning that if no value="" is being set, then the options main value will be used as default. However, if you have for example some names, but you wish only ID's, then: <option value="3">Kalle H. Väravas</option> and the value parameter will be used, instead of the options value.

Full working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Change select menu options on the fly - Kalle H. Väravas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        html, body {margin: 0px; padding: 20px;}
        .hidden_select {display: none;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
</head>
<body>
<input type="radio" name="group" value="a" checked /> A
<input type="radio" name="group" value="b" /> B<br />

<br />

<?php

// Group A select menu
echo '<select name="group_a" class="hidden_select">';
for ($i = 1; $i <= 4; $i++) {
    echo '<option>' . $i . '</option>';
}
echo '</select>';

// Group B select menu
echo '<select name="group_b" class="hidden_select">';
for ($i = 5; $i <= 9; $i++) {
    echo '<option>' . $i . '</option>';
}
echo '</select>';

?>

<script>
// This decoument ready can be used as setting the default value. If you remove the "checked", from the first radiobutton..then both selects will be hidden and of course none of the radiobuttons will be checked
$(document).ready(function() {

    // Lets get the default group by checking which radiobutton is checked
    var current_checked = $('input[name=group]:checked');

    // If we have a default value on load, then:
    if (current_checked) {

        // We pick the select matching to our radiobuttons value and make it visible
        $('select[name=group_' + current_checked.val() + ']').show();
        // PS: You can use .fadeIn() instead of show()

    }

});

// Now lets catch the click action on any of the radiobuttons
$('input[name=group]').click(function () {

    // Lets get the group ID (a or b), from radiobuttons value
    var this_group = $(this).val();

    // First lets make both selects equal and hide them
    $('select.hidden_select').hide();

    // Then display the currently active select
    $('select[name=group_' + this_group + ']').show();

});
</script>
</body>
</html>

Upvotes: 0

Alex Pacurar

Reputation: 5871

you need no php to do this....that`s why we have javascript, to manipulate DOM elements: First, you need to have the same 'name' attribute for all the radio buttons:

<input type="radio" name="choose_a_name" value="a">a
<input type="radio" name="choose_a_name" value="b">b
<select name="group">

var SetOptions = function(selectElem, from, to)
{    
    for(var i = from; i<=to;i++)
    {
        $('<option>').html(i).val(i).appendTo(selectElem);
    }
}; 
$('input[type=radio]').change(function()
{    
    switch(this.value)
    {
        case 'a':
            SetOptions ($('select').empty(),1,4);
            break;                    
         case 'b':
            SetOptions ($('select').empty(),5,9);
            break;
    }           
});

Upvotes: 1

AmGates

Reputation: 2123

Use the below code

<input type="radio" value="a" onclick="assignVal(1)">a
<input type="radio" value="b" onclick="assignVal(2)">b
function assignVal(flg)
{

  if(flg==1)
  {
   var val = 4;
  <?php $range = echo '<script type="text/javascript"> echo val; </script> ?>
  }
  else
  {
  var val = 9;
  <?php $range = echo '<script type="text/javascript"> echo val; </script> ?>
  }
}

<select name="group">
<?php
for ($i=1; $i<=$range; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>

Hope this helps you.

Upvotes: 1

Michael Sagalovich

Reputation: 2549

Change the radio buttons html to this:

<input type="radio" value="a" name="selectedValue" onclick="selectedValue('a');">a
<input type="radio" value="b" name="selectedValue" onclick="selectedValue('b');">b

Make two selects, not more than one will be shown in any given moment

<select name="group" for="a" style="display: none" disabled="disabled" >
<?php
for ($i=1; $i<=4; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>
<select name="group" for="b" style="display: none" disabled="disabled" >
<?php
for ($i=5; $i<=9; $i++)
{
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
?>
</select>

using jQuery, add the following logic to the document ready event:

$(function() {
    $('[name=selectedValue]').each(function() {
        if (this.checked) {
            selectedValue(this.value);
        }
    }
});

it will display the correct select after loading the page.

Define the selectedValue function as follows:

function selectedValue(value) {
    $('select[name=group][for=' + value + ']')
        .show()
        .removeAttr('disabled');
    $('select[name=group][for!=' + value + ']')
        .hide()
        .attr('disabled', 'disabled');
}

It chooses the select to display.

Upvotes: 1

Jaison Justus

Reputation: 2793

php is a server scripting language, if process with in the server and send the output the client machine. according to your requirement you need to use ajax. for that you can use raw javascript of javascript libraries like jquery, mootools etc. if you don't know jquery or mootools dont worry. here is a video tutorial for jquery. learn this and enjoy!!!

Jquery video tutorial for absolute beginners

Upvotes: 1

Change select menu options on the fly

Answers (6)

Related Questions