How Can A Click Of A Button Change The Content Of A Drop Down Menu?

May 04, 2024 Post a Comment

I would like to make it that when a button is clicked a certain values in a drop down menu appears later on in the same document. For example if there was a button called Honda and

Solution 1:

I suggest the simplest solution is a JavaScript. Seems overload to use a framework for such a simple task:

<html><head><title>JS example</title></head><body><scripttype="text/javascript"><!--

  //var opt_one = newArray('blue', 'green', 'red');
  var opt_two = newArray('plaid', 'paisley', 'stripes');

  //functionupdateTarget() {
    var f = document.myform;
    var which_r = null;
    if (f) {

      // first option selected? ("One")if (f.trigger.value == '1') {
        which_r = opt_one;

      // ...or, second option selected? ("Two")
      } elseif (f.trigger.value == '2') {
        which_r = opt_two;

      // no known option, hide the secondary popup
      } else {
        f.target.style.display = 'none';
      }

      // did we find secondary options for the selection?if (which_r) {

        // reset/clear the target pop-up
        f.target.innerHTML = '';

        // add each optionfor (var opt in which_r) {
          f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
        }

        // display the secondary pop-up
        f.target.style.display = 'inline';
      }
    }
  } // updateTarget()//--></script><formname="myform"action="#"><selectname="trigger"onchange="updateTarget();"><option>Select one...</option><option>-</option><optionvalue="1">One</option><optionvalue="2">Two</option></select><selectname="target"style="display:none;"></select></form></body></html>

Solution 2:

You could do this using jquery, with one PHP backend script to populate the values of the select box based on the button you click.

Some simple HTML to start with:

<formaction="script.php"><buttonid="Honda"onClick="loadModelsForMake('Honda');">Honda</button><buttonid="Toyota"onClick="loadModelsForMake('Toyota');">Toyota</button><selectname="models"id="models"><optionvalue="">Please Select A Make</option></select></form>

Then you'd need a PHP script set up to give you the appropriate list of values given the make selected. Best to do this on the back-end so you don't hardcode things in your javascript code. Make a file called models.php. It will look for the "make" variable defined in the query string and return a JSON array of models for that make. If you want you can hook this up to a database of models for makes so you're not hard coding things:

<?php$models = array();
if ($_GET['make'] == 'Toyota') {
  models[] = array(id: 0, name: 'Matrix'});
  models[] = array(id: 1, name: 'Yaris'});
} elseif ($_GET['make'] == 'Honda') {
  models[] = array(id: 0, name: 'Civic'});
  models[] = array(id: 1, name: 'Pilot'});
}
echo json_encode($models);
?>

Lastly you need the JQuery to hook it all together. Add this script block to your page:

<scripttype="text/javascript"charset="utf-8">functionloadModelsForMake(carMake) {
    $.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){
      var options = '';
      for (var i = 0; i < json.length; i++) {
        options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>';
      }
      $("models").html(options);
    })
}
</script>

Of course make sure you include the base jQuery script in your page ;)

Solution 3:

You would need to use AJAX and jQuery has functions built in that can make this simpler.

As for the button itself, you would use onclick to start the request.

<inputtype="button" onclick="carRequest('honda');" />

javascript php asp

How Can A Click Of A Button Change The Content Of A Drop Down Menu?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How Can A Click Of A Button Change The Content Of A Drop Down Menu?"