Question

我有这个表格，有以下选项：

    <select name="choices" id="options" onchange="showText()">
    <option value="">Select amount</option>
    <option value="1">100PHP</option>
    <option value="2"> 500PHP</option>
    <option value="3"> 1000PHP</option>
    <option value="4"> 2000PHP</option>
    <option value="5"> 3000PHP</option>
    <option value="6"> 4000PHP</option>
    <option value="7"> 5000PHP</option>
    <option value="8"> 10,000PHP</option>
    <option value="others"> others..</option>
    </select>

    <div class="control-group" id="show" style="display:none;">

当用户选择选项1-8时，它将显示金额。我通过这个javascript成功地做到了这一点：

    function showText(){
   var value = document.getElementById('options').value;
   if(value == '1'){
   var amount = document.getElementById("amount");
   amount.value = "100";
   document.getElementById('show').innerHTML =
   "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P 100 </b></font>"
   document.getElementById('show').style.display = "block";
   }
   else if(value == '2'){
   var amount = document.getElementById("amount");
   amount.value = "500";
   document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P 500 </b></font>" 
   document.getElementById('show').style.display = "block";
   }
   //up to option 8

现在，当用户选择“其他”时，它将显示另一个输入字段。用户输入的值将是值'选项'：

    else if (value == 'others'){
   document.getElementById('show').innerHTML = "<br><div class='control-group'><label class='control-label'>Enter Amount</label><div class='controls'><input type='text' id='other_amount' name='other_amount'> ";
   var amount = document.getElementById("other_amount").value;
   document.getElementById('show').style.display = "block";
   }

不幸的是，我没有成功将第二个输入的值作为第一个输入的值。我希望你能帮忙！谢谢！

Answer 1

首先，您可以对代码进行大量改进：

function showText(){
    var value = document.getElementById('options').value;
    if(value == '-1'){
       //Other
       document.getElementById('hidden').style.display = 'block';
    }
    else {
        document.getElementById('hidden').style.display = 'none';
        var amount = document.getElementById("amount");
        amount.value = value;
        document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P " + value + "</b></font>" 
        document.getElementById('show').style.display = "block";
    }
}

您将html更改为：

<select name="choices" id="options" onchange="showText()">
    <option value="">Select amount</option>
    <option value="100">100PHP</option>
    <option value="500">500PHP</option>
    <option value="1000">1000PHP</option>
    <!-- (...) -->
    <option value="-1"> others..</option>
</select>

我还建议添加＆＃34;隐藏＆＃34;当他们在你的html中选择others时输入，但是将其设置为不可见：

<div id="hidden" style="display:none;"class='control-group'>
    <label class='control-label'>Enter Amount</label><div class='controls'>
        <input type='text' id='other_amount' name='other_amount' onChange='otherText()'/>
     </div>
</div>

现在，当他们选择值为others..的{{1}}时，您希望显示一个可以选择自己值的输入：

-1

现在我们只需要一个不应该成为问题的函数if (value == -1) { document.getElementById('hidden').style.display = 'block'; }：

otherText()

Working jsFiddle

获取输入内的输入值

1 个答案: