Question

我有多个div，当我选择值1时，我想显示2个隐藏文本。当我选择值2时，它会显示4个隐藏文本，等等。

function showDiv(divId, element) {
  document.getElementById('depositProductType').addEventListener('change', function() {
    var style = this.value == 1 ? 'block' : 'none';
    document.getElementById('allowJoint').style.display = style;
    document.getElementById('allowTransfer').style.display = style;
    var style = this.value == 2 ? 'block' : 'none';
    document.getElementById('allowJoint').style.display = style;
    document.getElementById('allowTransfer').style.display = style;
    document.getElementById('allowDisabling').style.display = style;
    document.getElementById('createOne').style.display = style;

    var style = this.value == 3 ? 'block' : 'none';
    document.getElementById('allowTransfer').style.display = style;
    document.getElementById('createOne').style.display = style;

  });
}

<select id="depositProductType" name="prod_type" onchange="showDiv('allowJoint','allowTransfer','allowDisabling','createOne', this)">
  <option class="blank" value="">Please select</option>
  <option value="1">Fixed Deposit</option>
  <option value="2">Savings Deposit</option>
  <option value="3">Scheduled Deposit</option>
</select>

<!-- this is the multiple div I want to display from my html -->
<div id="allowJoint"> ------- </div>
<div id="allowTransfer"> ------ </div>
<div id="allowDisabling"> ------- </div>
<div id="createOne"> ---------- </div>

Answer 1

您选择的第一个更改是仅传递元素

<select id="depositProductType" name="prod_type" onchange="showDiv(this)">

然后，由于showDiv已由onChange事件触发，因此showDiv无需侦听事件。只需调用您的函数即可。

function showDiv(ele) {
    var allowJoint = document.getElementById('allowJoint');
    var allowTransfer = document.getElementById('allowTransfer');
    var allowDisabling = document.getElementById('allowDisabling');
    var createOne = document.getElementById('createOne');
    if(ele.value == 1) {
        allowJoint.style.display = 'block';
        allowTransfer.style.display = 'block';
        allowDisabling.style.display = 'none';
        createOne.style.display = 'none';
    }
    else if(ele.value == 2) {
        allowJoint.style.display = 'block';
        allowTransfer.style.display = 'block';
        allowDisabling.style.display = 'block';
        createOne.style.display = 'block';
    }
    else if(ele.value == 3) {
        allowTransfer.style.display = 'block';
        createOne.style.display = 'block';
        allowJoint.style.display = 'none';
        allowDisabling.style.display = 'none';
    }
}

Answer 2

function showDiv(element) {
  var old_element = document.getElementById("depositProductType");
  var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
  document.getElementById('depositProductType').addEventListener('change', function() {
console.log(this.value)
    document.getElementById('allowJoint').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none';
    document.getElementById('allowTransfer').style.display = (this.value == 1 || this.value == 2) ? 'block' : 'none';

    document.getElementById('allowDisabling').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none';
    document.getElementById('createOne').style.display = (this.value == 3 || this.value == 2) ? 'block' : 'none';

  });
}

<select id="depositProductType" name="prod_type" onchange="showDiv(this)">
  <option class="blank" value="0">Please select</option>
  <option value="1">Fixed Deposit</option>
  <option value="2">Savings Deposit</option>
  <option value="3">Scheduled Deposit</option>
</select>

<!-- this is the multiple div I want to display from my html -->
<div id="allowJoint" style="display: none"> allowJoint </div>
<div id="allowTransfer" style="display: none"> allowTransfer </div>
<div id="allowDisabling" style="display: none"> allowDisabling </div>
<div id="createOne" style="display: none"> createOne </div>

选择选项时显示多个文本

2 个答案: