Question

我正在撰写表单，并希望通过显示相关<div>

来显示CC或payPal的付款方式

我的JS功能：

function myFunction() { 
    if (payment.value == "Credit Card")
    {
        document.getElementById("PP").style.visibility = "hidden";
    }
    if (payment.value == "PayPal") {
      document.getElementById("CC").style.display= "hidden";
    }
}

HTML

<select name="payment" id="payment" select = "selected" onChange="myFunction()">

这似乎不起作用。建议？

Answer 1

您需要为css属性使用正确的值。

display可以是＆＃34;无＆＃34;，＆＃34;阻止＆＃34;，＆＃34;＆＃34; （无）

visibility可以＆＃34;隐藏＆＃34;，＆＃34;可见＆＃34;

您还需要恢复其他元素的可见性。

function myFunction(payment) { 

    if (payment.value == "Credit Card")
    {
        document.getElementById("PP").style.display = "none";
        document.getElementById("CC").style.display= "block";
    }
    if (payment.value == "PayPal") {
      document.getElementById("CC").style.display= "none";
      document.getElementById("PP").style.display= "block";
    }
}

选择框应为：

<select ... onchange="myFunction(this.value);">

Answer 2

试试这个

function myFunction() { 
 var payment =document.getElementById("payment");
if (payment.value == "Credit Card")
{
    document.getElementById("PP").style.display = "none";
}
if (payment.value == "PayPal") {
  document.getElementById("CC").style.display= "none";
}

}

Answer 3

你需要纠正一些事情。

HTML

<select name="payment" id="payment" select ="selected" onChange="myFunction()">
    <option value="cred_car">Credit Card</option>
    <option value="paypal">PayPal</option>
</select>

    <div id="PP">PP</div>
    <div id="CC">CC</div>

的JavaScript

function myFunction() { 
    //alert (payment.value);
    if (payment.value == "cred_car")
    {
        document.getElementById("CC").style.display = "none";
        document.getElementById("PP").style.display = "block";
    }
    if (payment.value == "paypal") {
      document.getElementById("PP").style.display= "none";
      document.getElementById("CC").style.display= "block";
    }
}

jsFiddle：http://jsfiddle.net/pefcf508/

Answer 4

我认为你有几种方法可以改善这一点，使其发挥作用。

在调用myFunction时传入“this”引用以便于选择
请务必隐藏未选择的值并显示所选的值，以便您不仅隐藏值。
最初调用myFunction以根据默认选择设置可见性

JS小提琴：https://jsfiddle.net/04keaLfr/

这是HTML：

<select name="payment" id="payment" onchange="myFunction(this)">
    <option value="Credit Card">Credit Card</option>
    <option value="PayPal">PayPal</option>
</select>
<div id="PP">Paypal selected</div>
<div id="CC">Credit Card selected</div>

这是javascript：

function myFunction(el) {
    var selected = el.options[el.selectedIndex].value;
    document.getElementById('CC').style.display = (selected == 'Credit Card' ? 'inline' : 'none');
    document.getElementById('PP').style.display = (selected == 'PayPal' ? 'inline' : 'none');
}
myFunction(document.getElementById('payment'));

我想根据用户的选择隐藏div

4 个答案: