如果使用css选择器在jquery中选择了选项，则显示div

Question

I have a drop down list with 4 surface type options. The fist option is the default and is a shown div with input boxes for user to enter dimensions, the rest of the other options are hidden on page load via css. Currently, if I select a non-rectangle option, it does not hide the default div and show the hidden div. Here's the html:

    <div class="calc-wrap">
    <h3>Soil and Mulch</h3>
    <label for="surface">Type of surface:</label>

   <select id="surface" name="surface" onchange="selected_surface('calc_id', this.value)">
    <option value="_rect" selected="selected">Rectangle</option>
    <option value="_circle">Circle</option>
    <option value="_ring">Ring</option>
    <option value="_triangle">Triangle</option>
</select>

    <div class="user-inputs">
    <div id="rectangle">

        <div class="calc-input">
            <label for="length"><strong>Length</strong>(ft):</label>
            <input id="length" name="length" text="text" />
        </div><!--end of calc-input-->

        <div class="calc-input">
            <label for="width"><strong>Width</strong> (ft):</label>
            <input id="width" name="width" type="text" />
        </div><!--end of calc-input-->
    </div><!--end of rectangle-->

    <div class="hidden_field" id="circle">
        <div class="calc-input">
            <label for="radius"><strong>Radius</strong>(ft.):</label>
            <input id="radius" name="radius" type="text" />
        </div><!--end of calc-input-->
    </div><!--end of circle-->

    <div class="hidden_field" id="ring">
        <div class="calc-input">
            <label for="in_diameter"><strong>Inside Diameter</strong>(ft.):</label>
            <input id="in_diameter" name="indiameter" type="text" />
        </div><!--end of calc-input-->
        <div class="calc-input">
            <label for="ex_diameter"><strong>Outer Diameter</strong>(ft.):</label>
            <input id="ex_diameter" name="exdiameter" type="text" />
        </div><!--end of calc-input-->
</div><!--end of ring-->

    <div class="hidden_field" id="triangle">
            <div class="calc-input">
                <label for="base"><strong>Base</strong>(ft.):</label>
                <input id="base" name="base" type="text" />
            </div><!--end of calc-input-->
            <div class="calc-input">
                <label for="height"><strong>Height</strong>(ft.):</label>
                <input id="height" name="height" type="text" />
            </div><!--end of calc-input-->
        </div><!--end of triangle-->


        <div class="calc-input" id="soil_mulch_depth">
            <label for="soil_mulch_depth"><strong>Depth</strong>(inches):</label>
            <input id="soil_mulch_depth" name="depth" type="text" />
        </div><!--end of soil_mulch_depth-->
</div><!--end user_inputs-->

        <div class="results">
            <div class="calc-result">
                <label><strong>Volume</strong>(yards&sup3;)</label>
                <div class="result-value" id="soil_mulch_result"></div>
            </div><!--end calc-result-->
            <br>
            <div class="calc-result">
                <label><strong>Number of bags</strong>:</label>
                <div class="result-value" id="soil_bags_needed">0</div>
                <label>of soil</label>
                <input class="soil_parts" id="bags_soil" name="bags_soil" type="hidden" value="25" />
            </div><!--end result-value-->
            <br>
            <div class="calc-result">
                <label><strong>Number of bags:</strong>

                </label>
                <div class="result-value" id="mulch_bags_needed">0</div><!--end result-value-->
                <label>of mulch</label>
                <input class="mulch_parts" id="bags_mulch" name="bags_mulch" type="hidden" value="9" />
            </div>
            <br>
            <button class="calc-submit" onclick="bulk_calculate(" soil_mulch ",0)">Calculate</button>

Here's the css:

.hidden_field {
    display:none;
}

.user-inputs {
    float:left;
    margin-right:20px;
}
.results {
    float:left;
}
.calc-wrap {
   margin:30px 0;
   line-height:1;
}
.calc-wrap select {
   margin:0;
}
.calc-wrap input {
   margin:0 0 9px;
   font-family:arial;
   width:100px;
}
.calc-submit {
   clear:both;
   display:block;
}
.calc-wrap label {
    display:inline-block;
    vertical-align:middle;
    width:170px;
    font-size: 14px;
}
.calc-result label {
    width:auto;
    white-space:nowrap;
}
.result-value {
    display:inline-block;
    vertical-align:middle;
}
.calc-wrap h3 {
    font-weight:bold;
    color: #8dc63f;
    font-family:'Tahoma', sans-serif;

}

Here's the jquery:

    function selected_surface(calc_id, show_id){
    $ = jQuery;
    $('#' + calc_id + '_rect').css('display', 'none');
    $('#' + calc_id + '_circle').css('display', 'none');
    $('#' + calc_id + '_ring').css('display', 'none');
    $('#' + calc_id + '_triangle').css('display', 'none');
    $('#' + calc_id + '_manual').css('display', 'none');
    $('#' + calc_id + show_id).css('display', 'block');
    }

see my fiddle here: http://jsfiddle.net/rnle99/8nKFg/5/

I've tried looking at previous questions such as:

show DIV once selected option PASS from drop down menu

Display div if option is selected in jQuery

Answer 1

• first of of you're passing calc_id onchange="selected_surface('calc_id', this.value) i've no idea what that is.
• i've changed the <option> values to rect , circle etc for simplicity.
• i've added rect id for the div for rectangle, which was missing.

• i've added .shape class to all divs for each shape to access them together.

    function selected_surface(elm){ var divId= $(elm).val(); $('.shape').hide(); // hide all other shapes $('#'+divId).css('display','block'); // show the selected shape } 

JSFiddle

Answer 2

Couple issues with your code...

Mainly, the values being passed from options when the change event fires don't match up to the IDs of the hidden containers.

Here's a fiddle which works. I've simplified the selector logic, changes the html slightly and have everything executing on document ready. Have a look: http://jsfiddle.net/adamfullen/2Kk38/

HTML

<div class="calc-wrap">
     <h3>Soil and Mulch</h3>
     <label for="surface">Type of surface:</label>

    <select id="surface" name="surface" onchange="">
        <option value="rectangle" selected="selected">Rectangle</option>
        <option value="circle">Circle</option>
        <option value="ring">Ring</option>
        <option value="triangle">Triangle</option>
    </select>

    <div class="user-inputs">
        <div class="hidden_field" id="rectangle">

            <div class="calc-input">
                <label for="length"><strong>Length</strong>(ft):</label>
                <input id="length" name="length" text="text" />
            </div><!--end of calc-input-->

            <div class="calc-input">
                <label for="width"><strong>Width</strong> (ft):</label>
                <input id="width" name="width" type="text" />
            </div><!--end of calc-input-->
        </div><!--end of rectangle-->

        <div class="hidden_field" id="circle">
            <div class="calc-input">
                <label for="radius"><strong>Radius</strong>(ft.):</label>
                <input id="radius" name="radius" type="text" />
            </div><!--end of calc-input-->
        </div><!--end of circle-->

        <div class="hidden_field" id="ring">
            <div class="calc-input">
                <label for="in_diameter"><strong>Inside Diameter</strong>(ft.):</label>
                <input id="in_diameter" name="indiameter" type="text" />
            </div><!--end of calc-input-->
            <div class="calc-input">
                <label for="ex_diameter"><strong>Outer Diameter</strong>(ft.):</label>
                <input id="ex_diameter" name="exdiameter" type="text" />
            </div><!--end of calc-input-->
    </div><!--end of ring-->

        <div class="hidden_field" id="triangle">
                <div class="calc-input">
                    <label for="base"><strong>Base</strong>(ft.):</label>
                    <input id="base" name="base" type="text" />
                </div><!--end of calc-input-->
                <div class="calc-input">
                    <label for="height"><strong>Height</strong>(ft.):</label>
                    <input id="height" name="height" type="text" />
                </div><!--end of calc-input-->
            </div><!--end of triangle-->


            <div class="calc-input" id="soil_mulch_depth">
                <label for="soil_mulch_depth"><strong>Depth</strong>(inches):</label>
                <input id="soil_mulch_depth" name="depth" type="text" />
            </div><!--end of soil_mulch_depth-->
    </div><!--end user_inputs-->

            <div class="results">
                <div class="calc-result">
                    <label><strong>Volume</strong>(yards&sup3;)</label>
                    <div class="result-value" id="soil_mulch_result"></div>
                </div><!--end calc-result-->
                <br>
                <div class="calc-result">
                    <label><strong>Number of bags</strong>:</label>
                    <div class="result-value" id="soil_bags_needed">0</div>
                    <label>of soil</label>
                    <input class="soil_parts" id="bags_soil" name="bags_soil" type="hidden" value="25" />
                </div><!--end result-value-->
                <br>
                <div class="calc-result">
                    <label><strong>Number of bags:</strong>

                    </label>
                    <div class="result-value" id="mulch_bags_needed">0</div><!--end result-value-->
                    <label>of mulch</label>
                    <input class="mulch_parts" id="bags_mulch" name="bags_mulch" type="hidden" value="9" />
                </div>
                <br>
                <button class="calc-submit" onclick="bulk_calculate(" soil_mulch ",0)">Calculate</button>

JavaScript

function selected_surface(calc_id, show_id){
    var $ = jQuery;
    $('.hidden_field').hide();
    $('#'+show_id).show();
}

$(function(){
    $('#surface').on("change", function(e){
        var show_id = this.value;
        selected_surface('calc_id', show_id);        
    });

    $('#rectangle').show();

});