How do i use jQuery for displaying more options in a form?

Question

Let's say you have a form:

<form>
  <select name="cars">
    <option value="all">All Cars</option>
    <option value="volvo">Volvo</option>
    <option value="audi">Audi</option>
  </select>

  <select name="volvo_dealers">
    <option value="dealer1">Volvo Dealer 1</option>
    <option value="dealer2">Volvo Dealer 2</option>
  </select>

  <select name="audi_dealers">
    <option value="dealer1">Audi Dealer 1</option>
    <option value="dealer2">Audi Dealer 2</option>
  </select>

  <input type="submit" value="Submit">

</form>

However, you only want to display one of the two "dealers" select-options after you have chosen on of Volvo or Audi. The one that will be displayed is of course depending on which of Volvo and Audi was selected in the "cars" select-options.

What might be a good approach for this small issue?

Rergards, Bill

Answer 1

There's a way of doing this without adding more than one id (and no classes) that would also allow you to add more dealers if you needed. First you need to hide the dealers select dropdowns with css.

Then add an id of 'cars' to the cars select:

<select name="cars" id="cars">
    <option value="all">All Cars</option>
    <option value="volvo">Volvo</option>
    <option value="audi">Audi</option>
  </select>

Then use jQuery to do the rest:

$('#cars option').click(function(){
  var car = $(this).attr('value');
  $('select.' + car + '_dealers').show();
});

Answer 2

Some answers already gave you the script to do what you wanted with the form. But here's my version of the script for your markup. Check an example here http://jsbin.com/omuboq/1/edit

$(document).ready(function(){
$('form').change(function(){

var selectOp = $("form select[name='cars']").val();

  switch(selectOp)  { 

    case 'volvo' :
  $("form select[name='audi_dealers']").hide();
  $("form select[name='volvo_dealers']").show();
  break;

    case 'audi':
  $("form select[name='volvo_dealers']").hide();
  $("form select[name='audi_dealers']").show();  
  break;


  case 'all' :
    $("form select[name='audi_dealers']").show();
    $("form select[name='audi_dealers']").show();
    break;

  }      

});
});

The script is bigger than that of others but works well. This script runs on a basic principle. It first checks the value of the cars dropdown menu and displays or hide the other dropdown menu according to the selected option.

Answer 3

Most naturally would be to show only corresponding dealers at a time and hide others:

$('.cars').change(function() {
    $('.dialers').hide().filter('[name="' + $(this).val() + '_dealers"]').show();
});

http://jsfiddle.net/BncsJ/

So if I select Audi I want to see only Audi dealers, I don't need others.

Answer 4

Given your markup you can do

$(function(){
    $("select[name=cars]").change(function(){
        if ($(this).val() == "volvo") {
            $("select[name=volvo_dealers]").show();
            $("select[name=audi_dealers]").hide();
        } else if (($(this).val() == "audi")) {
            $("select[name=audi_dealers]").show();
            $("select[name=volvo_dealers]").hide();
        } else {
            $("select[name=volvo_dealers]").hide();
            $("select[name=audi_dealers]").hide();
        }
    });
   $("select[name=cars]").trigger("change"); 
});

Here is jsFiddle