Question

我有三个组合框，每个组合框应该显示并隐藏相应的div，如果选择的话。

  <head>
<script type="text/javascript">
$('#combobox').change(function() {
    if ($(this).val() != '') {
        $('.WalLDP').attr('style', 'display:visible');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:none');
    } else{
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:none');
    }
});


$('#combobox1').change(function() {
    if ($(this).val() != '') {
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:visible');
        $('.BBBDP').attr('style', 'display:none');
    } else{
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:none');
    }
});

$('#combobox2').change(function() {
    if ($(this).val() != '') {
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:visible');
    }    } else{
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:none');
    }
});
</script>
  </head>

给出了三个下拉列表：

<select id="combobox" name="combobox" onchange="this.form.submit();">
        <option value="">Select one...</option>
        <option id="WallyS" value="WallyS"> Walmart </option>
        <option id="AppliS" value="AppliS">Appliance</option>
        <option id="BBBS" value="BBBS">Beyond Presedential</option>
    </select>
       <select id="combobox1" name="combobox1" onchange="this.form.submit();">
        <option value="">Select one...</option>
        <option id="WallyS" value="WallyS"> Walmart </option>
        <option id="AppliS" value="AppliS">Appliance</option>
        <option id="BBBS" value="BBBS">Beyond Presedential</option>
    </select>
     <select id="combobox2" name="combobox2" onchange="this.form.submit();">
        <option value="">Select one...</option>
        <option id="WallyS" value="WallyS"> Walmart </option>
        <option id="AppliS" value="AppliS">Appliance</option>
        <option id="BBBS" value="BBBS">Beyond Presedential</option>
    </select>

div的代码是：

<div style="display:block">default</div>
    <div class="WalLDP" style="display:none">content1  of Walmart OR Appliance OR  Beyond Presedential</div>
    <div class="AppliDP" style="display:none">content2 of Walmart OR Appliance OR  Beyond Presedential</div>
    <div class="BBBDP" style="display:none">content3   of Walmart OR Appliance OR  Beyond Presedential</div>

我想要的是当选择下拉列表中的任何值时，它应该使用javascript和onchange =“this.form.submit（）;”显示相应的div下拉列表应该将数据库中的相应数据显示到相应的div.onchange =“this.form.submit（）;”它工作正常，将相应的记录分配到db中的div。在提交时，它会加载相应的记录，但在组合框提交页面刷新并加载默认div。如何在提交时加载数据的相应div？

Answer 1

首先，您应该简化代码并使其更易于管理。

至于你的问题，你应该从数据库设置值，并在每次更改选择或获取新值时更新标记

例如：

    var value = 3; // Here you have to set value that you get from database
    var $select = $('.js-select'); // Specify your select here

    var updateBoxes = function( value ) {
        $('.js-box').hide();
        $('#box' + value).show();
    }

    var initSelects = function( value ) {
        if (value !== 0) {
            $select.val( value );
        }
        $select.on('change', function() {
            updateBoxes( $select.val() );
        });
    }

    initSelects( value );
    updateBoxes( value );

以及HTML-markup如下：

<select class="form-control js-select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<div id="box1" style="display: none;" class="well js-box">
    <h3>Box 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, doloribus!</p>
</div>

<div id="box2" style="display: none;" class="well js-box">
    <h3>Box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, doloribus!</p>
</div>

<div id="box3" style="display: none;" class="well js-box">
    <h3>Box 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, doloribus!</p>
</div>

另见JSFiddle http://jsfiddle.net/4b0uyd2d/

我希望它会帮助你，随时提出任何问题。

Answer 2

通过让你的受抚养id模式，你的生活会更轻松。对于每个从属div，请使用id，id在其对应的select的{{1}}上进行图案化。然后，您可以轻松定位隐藏或显示哪个div。

示例代码段：

$("select.cascade").on("change", function() {
  var which  = this.id, 
      div    = which + "d", 
      sel    = $(this).val();
  
  if (sel == '0') {
    $("#" + div).hide();
  } else {
    $("#" + div).show();
  }
  
  // Call form.submit here if need be
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="c1" name="combobox" class="cascade">
	<option value="0">Select one...</option>
	<option id="WallyS" value="WallyS"> Walmart </option>
	<option id="AppliS" value="AppliS">Appliance</option>
	<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
   <select id="c2" name="combobox1" class="cascade">
	<option value="0">Select one...</option>
	<option id="WallyS" value="WallyS"> Walmart </option>
	<option id="AppliS" value="AppliS">Appliance</option>
	<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
 <select id="c3" name="combobox2" class="cascade">
	<option value="0">Select one...</option>
	<option id="WallyS" value="WallyS"> Walmart </option>
	<option id="AppliS" value="AppliS">Appliance</option>
	<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>

<div style="display:block">default</div>
<div id="c1d" class="WalLDP" style="display:none">content1 </div>
<div id="c2d" class="AppliDP" style="display:none">content2 </div>
<div id="c3d" class="BBBDP" style="display:none">content3</div>

JQuery在下拉列表中显示和隐藏div

2 个答案: