Question

Using asp.net in Webmatrix I created a drop menu where you select a state, and then based on that choice there is another drop menu for the user to select a region within that state.

The problem I am having is when the data is posted it will add a bunch of commas for the other regions not selected. I can see how this is happening, each select tag for region has name=”Region”, however I don’t know how to fix this, the div tag they are all nested in I can’t use the ‘name’ attribute for. Without a name somewhere the region field nothing gets posted to the database.

Here is the html code:

<label>State:</label>
   <select class="stareg" id="SelectState" name="State" size="1">
        <option value="">Please Select</option>
        <option value="ACT">A.C.T.</option>
        <option value="NSW">New South Wales</option>
        <option value="NT">Northern Territory</option>
        <option value="QLD">Queensland</option>
        <option value="SA">South Australia</option>
        <option value="TAS">Tasmania</option>
        <option value="VIC">Victoria</option>
        <option value="WA">Western Australia</option>
    </select>

   <label>Region:</label>

         <div id="SelectRegion">
    <div>
         <div>
            <select class="stareg" name="Region">
                <option value="">Please Select</option>
               </select>
        </div>
    </div>

    <div id="VIC" style="display: none;">
         <div id="VICReg">
            <select class="stareg" id="VICRegs" name="Region">
                <option value="">Please Select</option>
                <option value="Melbourne & Inner Suburbs">Melbourne & Inner Suburbs</option>
                <option value="East & South East">East & South East Suburbs</option>
                <option value="Geelong">Geelong</option>
                <option value="Gippsland">Gippsland</option>
                <option value="Mornington Peninsula">Mornington Peninsula</option>
                <option value="North & West Suburbs">North & West Suburbs</option>
                <option value="Yarra Valley & Dandenong Ranges">Yarra Valley & Dandenong Ranges</option>
                <option value="Regional Victoria">Regional Victoria</option>
            </select>
        </div>
    </div>

    <div id="NSW" style="display: none;">
          <div id="NSWReg">
            <select class="stareg" id="NSWRegs" name="Region">
                <option value="">Please Select</option>
                <option value="Sydney & Inner Suburbs">Sydney & Inner Suburbs</option>
                <option value="Central West">Central West</option>
                <option value="Hunter">Hunter</option>
                <option value="North Coast">North Coast</option>
                <option value="South Coast">South Coast</option>
                <option value="Southern Inland">Southern Inland</option>
                <option value="Western Sydney">Western Sydney</option>
                <option value="Regional N.S.W.">Regional N.S.W.</option>

            </select>
        </div>
    </div>

    <div id="QLD" style="display: none;">
          <div id="QLDReg">
            <select class="stareg" id="QLDRegs" name="Region">
                <option value="">Please Select</option>
                <option value="Brisbane & Inner Suburbs">Brisbane & Inner Suburbs</option>
                <option value="Bundaberg">Bundaberg</option>
                <option value="Cairns">Cairns</option>
                <option value="Gold Coast">Gold Coast</option>
                <option value="Mackay">Mackay</option>
                <option value="Sunshine Coast">Sunshine Coast</option>
                <option value="Townsville">Townsville</option>
                <option value="Regional QLD">Regional QLD</option> 
            </select>
        </div>
    </div>

    <div id="SA" style="display: none;">
          <div id="SAReg">
            <select class="stareg" id="SARegs" name="Region">
                <option value="">Please Select</option>
                <option value="Adelaide & Inner Suburbs">Adelaide & Inner Suburbs</option>
                <option value="Adelaide Hills">Adelaide Hills</option>
                <option value="Barossa">Barossa</option>
                <option value="Clare Valley">Clare Valley</option>
                <option value="Eyre Peninsula">Eyre Peninsula</option>
                <option value="Fleurieu Peninsula">Fleurieu Peninsula</option>
                <option value="Kangaroo Island">Kangaroo Island</option>
                <option value="Limestone Coast">Limestone Coast</option>
                <option value="Murraylands">Murraylands</option>
                <option value="Yorke Peninsula">Yorke Peninsula</option>
                <option value="Regional S.A.">Regional S.A.</option> 
            </select>
        </div>
    </div>

    <div id="WA" style="display: none;">
          <div id="WAReg">
            <select class="stareg" id="WARegs" name="Region">
                <option value="">Please Select</option>
                <option value="Perth & Inner Suburbs">Perth & Inner Suburbs</option>
                <option value="Great Southern">Great Southern</option>
                <option value="Peel">Peel</option>
                <option value="South West">South West</option>
                <option value="Regional W.A.">Regional W.A.</option> 
            </select>
        </div>
    </div>

    <div id="ACT" style="display: none;">
          <div id="ACTReg">
            <select class="stareg" id="ACTRegs" name="Region">
                <option value="">Please Select</option>
                <option value="Canberra & Inner Suburbs">Canberra & Inner Suburbs</option>
                <option value="Other Area A.C.T">Other Area A.C.T</option>
            </select>
        </div>
    </div>

    <div id="TAS" style="display: none;">
          <div id="TASReg">
            <select class="stareg" id="TASRegs" name="Region">
                <option value="">Please Select</option>
                <option value="Hobart & Inner Suburbs">Hobart & Inner Suburbs</option>
                <option value="Davenport">Davenport</option>
                <option value="Launceston">Launceston</option>
                <option value="Regional Tasmania">Regional Tasmania</option>
            </select>
        </div>
    </div>

    <div id="NT" style="display: none;">
          <div id="NTReg">
            <select class="stareg" id="NTRegs" name="Region">
                <option value="">Please Select</option>
                <option value="Darwin & Inner Suburbs">Darwin & Inner Suburbs</option>
                <option value="Regional N.T.">Regional N.T.</option>
            </select>
        </div>
    </div>

</div>

And here is the jquery script:

$(function () {
    $('#SelectState').change(function () {
        $('#SelectRegion > div').hide();
        $('#SelectRegion').find('#' + $(this).val()).show();
    });
});

Everything works how I want except for the additional commas sent to the database. Is there a way to wrap all the region select tags with the one name, or will it require some more advanced scripting? Any help will be much appreciated.

Answer 1

Your problem is because you use the same name parameter for all your selects controls the: name="Region", so all of them together are posted. Why ? because the parameter name is posted back, and you use the same on all, so they are mix up together with commas. The empty commas are the one you have hide and they are not selected any more if I understand well.

From the moment I see that you know what you do, I can suggest you a possible solution and you do it your way.

The moment you make the .show() on the javascript, change all selectes with name="", and left only the visible one with the: name="Region".

The code on javascript can be as:

$(function () {
  $('#SelectState').change(function () 
  {
    $('#SelectRegion > div').hide();

    // show the selected
    $('#SelectRegion').find('#' + $(this).val()).show();

    // remove the name from all that have the class stareg
    $('.stareg').attr('name', '')

    // set only to visible the class name
    $('#SelectRegion').find('#' + $(this).val() + 'Regs').attr('name', 'Region')

  });
});

I do not have the page, so may need some tweeks, I am not sure if the last line is find properly the select control to set the Region. Also I use the stareg class to remove the name from all selections – but DO NOT use the same class for other controls on that page.