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

时间：2014-06-02 18:27:31

标签： jquery html css

我有一个包含4种表面类型选项的下拉列表。第一个选项是默认选项，是一个显示的div，带有输入框，供用户输入尺寸，其余的其他选项在页面加载时通过css隐藏。目前，如果我选择非矩形选项，它不会隐藏默认div并显示隐藏的div。 这是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>

这是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;

}

这里是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');
    }

在这里看到我的小提琴：http://jsfiddle.net/rnle99/8nKFg/5/

我已经尝试过查看以前的问题，例如：

show DIV once selected option PASS from drop down menu

Display div if option is selected in jQuery

2 个答案:

答案 0 :(得分：1)

  • 你们中的第一个人正在传递 calc_id onchange="selected_surface('calc_id', this.value)我不知道那是什么。
  • 为了简单起见，我已将<option>值更改为rect，circle等。
  • 我已经为缺少的矩形div添加了rect id。

  • 我已将.shape类添加到每个形状的所有div中，以便一起访问它们。

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

JSFiddle

答案 1 :(得分：0)

对您的代码产生问题......

主要是，当更改事件触发时，从选项传递的值不会与隐藏容器的ID匹配。

这是一个有效的小提琴。我已经简化了选择器逻辑，稍微更改了html，并在文档就绪时执行了所有操作。看看：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();

});
相关问题
最新问题