Question

我试图在此下拉列表中选择yes，因此我可以显示另一个输入字段以增加折扣。

我正在尝试，但是什么也没显示。你能帮我吗？

<div class="form-group m-form__group row">

  <select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
  <option value="" disabled selected >--Choose--</option>
  <option value="yes" >Yes</option>
  <option value="no">No</option>
  </select>

</div>

<div id="offer"></div>

<script>
  function myFunction() {
    if (document.getElementById('is_offer').value = 'yes') {
      document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';

    }
  }

</script>

function myFunction() {
  if (document.getElementById('is_offer').value = 'yes') {
    document.getElementById('offer').innerText = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';

  }
}

<div class="form-group m-form__group row">

  <select class="form-control m-input" name="is_offer" id="is_offer" onclick="myFunction()" required>
    <option value="" disabled selected>--Choose--</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>

</div>


<div id="offer"></div>

Answer 1

您的条件声明有问题。使用document.getElementById（'is_offer'）。value ==='是'（三等分）

Answer 2

使用.innerHTML来设置div而不是innerText。 innerText假定您所有的html数据都是文本，并将其添加为文本。，对于yes条件，使用=进行赋值，但是我们必须进行比较，因此使用==。并在选择标签的onchange上的click事件上调用函数

function myFunction()
        {
           if( document.getElementById('is_offer').value=='yes')
           {
               document.getElementById('offer').innerHTML='<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';

           }
           else
           document.getElementById('offer').innerHTML=''
           
        }

<div class="form-group m-form__group row">

 <select class="form-control m-input" name="is_offer" id="is_offer" onChange="myFunction()" required>
         <option value="" disabled selected >--Choose--</option>
          <option value="yes" >Yes</option>
          <option value="no">No</option>
         </select>

    </div>


 <div id="offer"></div>

Answer 3

function myFunction()
    {
       if (document.getElementById('is_offer').value === 'yes')
       {
           document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div></div></div>';
       }
    }

并用onclick更改onChange。

Answer 4

您有3个问题应更改。

如果您想听输入的变化，应该使用onchange而不是onclick。
在if条件下，您使用分配变量而不是比较（使用==或===）。
似乎您想更改HTML内容。因此，您应该使用innerHTML而不是innerText。

修复所有问题后，我们将得到如下代码：

<div class="form-group m-form__group row">

    <select class="form-control m-input" name="is_offer" id="is_offer" onchange="myFunction()" required>
        <option value="" disabled selected>--Choose--</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>

</div>


<div id="offer"></div>


<script>
    function myFunction() {
        if (document.getElementById('is_offer').value === 'yes') {
            document.getElementById('offer').innerHTML = '<div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label">* Discount::</label> <div class="col-xl-9 col-lg-9"> <div id="asd"></div> </div> </div>';
        }
    }
</script>

Answer 5

首选在select标签上使用<div class='col-md-4 box' data-toggle='modal' data-target='#TileBox"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><---------change this事件。另外，您应该使用onchange将值与===或yes进行比较，而不仅仅是no是分配。

通过使用模板并将其克隆，您不必将JavaScript与HTML代码混合使用，只需要获取模板，克隆并将其附加到您的=。

不要查询文档以在处理程序中找到您的选择，您可以通过div对象访问它，您可以将其作为处理程序的参数来访问。

此外，选择event.target时也不要忘记消除折扣。

no

function onSelect(event) {
    const offer = document.getElementById('offer'); 
    offer.innerHTML = '';
    
    if (event.target.value === 'yes') {
      const tpl = document.getElementById('discount-tpl');
      const clone = document.importNode(tpl.content, true);
      offer.appendChild(clone);
    }
}

更改所选值时显示输入

5 个答案: