Question

I have a form with a bunch of dropdown options that I’m dressing up by allowing the option to be selected by clicking links and (in the future, images) instead of using the actual dropdown. There are a lot of dropdowns and most all will repeat the same basic idea, and some will literally repeat just with different variables. Here’s the HTML for one of those.

<tr class="box1">
  <td>
    <select id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>

Then the corresponding fancier links to click that will select the corresponding option in the dropdown.

<div id="genderBox1">
  <div class="gender"><a class="boy" href="">Boy</a></div>
  <div class="gender"><a class="girl" href="">Girl</a></div>
</div>

So, when you click the link “Boy” it will select the corresponding dropdown value “Boy” There are going to be multiple Box#, so I can just repeat the jQuery each time with the new variables, but there’s surely a shorter way. Here’s the jQuery that makes it work.

//Box1 Gender
  var Gender1 = $('select#cimy_uef_7');
  var Boy1 = $("#genderBox1 .gender a.boy");
  var Girl1 = $("#genderBox1 .gender a.girl");

//On Page Load - Check Gender Box 1 Selection and addClass to corresponding div a
  if ( $(Gender1).val() == "Boy" ) {
    $(Boy1).addClass("selected");
    } else {
    $(Boy1).removeClass("selected");
    }

  if ( $(Gender1).val() == "Girl" ) {
    $(Girl1).addClass("selected");
    } else {
    $(Girl1).removeClass("selected");
    }

  //On Click - Change Gender Box 1 select based on image click
  $(Boy1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Boy");
    $(Girl1).removeClass("selected");
  });

  $(Girl1).click(function(event) {
    event.preventDefault();
    $(this).addClass("selected");
    $(Gender1).val("Girl");
    $(Boy1).removeClass("selected");
  });

My thought for shortening it was to just have a list of variables for each box and cycle through the numbers- 1,2,3,4 and have the jQuery grab the same # for each variable, but I can’t figure out a way to do it.

Let me know if there’s anything else I can provide to make the question better. This is my best idea for shortening this code, as I’m still very much a beginner at jQuery, but I’m positive there are much better ideas out there, so feel free to recommend a better path if you see it 🙂

Answer 1

Here is a generalized solution.

Construct your HTML as follows, ensuring that the text contained by the anchors (“Boy” / “Girl”) exactly matches the values of the corresponding menu options.

HTML:

<tr class="box1">
  <td>
    <select class="remoteSelectable" id="cimy_uef_7">
      <option value="Boy">Boy</option>
      <option value="Girl">Girl</option>
    </select>
  </td>
</tr>

<div id="genderBox1" class="remoteSelector" data-menu="cimy_uef_7">
  <div class="gender"><a href="">Boy</a></div>
  <div class="gender"><a href="">Girl</a></div>
</div>

javascript:

//force select menus to same value as clicked remote link
$(".remoteSelector a").on('click', function(e) {
    e.preventDefault();
    var $this = $(this).addClass('selected'),
        $container = $this.closest(".remoteSelector");
    $container.find("a").not(this).removeClass('selected');
    $('#' + $container.data('menu')).val($this.text());
});

//force remote links to reflect value of selected menu option
$(".remoteSelectable").on('change', function() {
    var $this = $(this);
    $(".remoteSelector").filter(function() {
        return $(this).data('menu') == $this.attr('id');
    }).find("a").removeClass('selected').filter(function() {
        return $(this).text() == $this.val();
    }).addClass('selected');
}).trigger('change');

DEMO

Notes :

• The ‘change’ handler is triggered immediately to force the correct remote link to be styled ‘selected’.

• The select menus may be hidden by moving them off-screen with absolute positioning, or with display:none if they are not part of a form that’s going to be submitted.

If at any point (after the handlers are attached) the menus need to be changed programatically then do so as follows to ensure the corresponding remote link is kept up to date :

$("#cimy_uef_7").val('Girl').trigger('change');