Javascript根据选择选项更改<p>内容</p>

时间:2010-07-05 15:38:10

标签: forms select javascript

使用Javascript不是最好的,所以我想问我哪里出错了。

正如标题所示,我有一个包含4个不同选项的选择框,当选择一个选项时我想更改id为pricedesc的<p>标签的内容。这是我到目前为止所拥有的。

function priceText(sel)
{
    var listingType = document.getElementById('listingtype');
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
    priceDesc = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Accommodation" ) {
    priceDesc = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc = "Enter for sale price";
    }

} 

在身体里我有:

            <label>Listing Type:</label>
            <select name="listingtype" id="listingtype" onchange="priceText(this);">
                <option value="Residential Letting">Residential Letting</option>
                <option value="Short Let">Short Let</option>
                <option value="Serviced Accommodation">Serviced Accommodation</option>
                <option value="Sale">Sale</option>
            </select>


            <label>Price:</label>
            <p id="pricedesc">Enter price</p>
            <input name="price" type="text" id="price" value="<%=Request.Form("price")%>" maxlength="10" />

感谢您的帮助。

学家

3 个答案:

答案 0 :(得分:13)

更改设置段落内容的行
priceDesc = "Enter price per month";

priceDesc.innerHTML = "Enter price per month";

目前,您只是将priceDesc变量更改为包含字符串而不是段落节点。设置节点的innerHTML属性会更改其中包含的html。 :d

答案 1 :(得分:1)

function priceText(sel)
{
    var listingType = document.getElementById('listingtype');
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
    priceDesc.innerHTML = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
    priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Accommodation" ) {
    priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
    priceDesc.innerHTML = "Enter for sale price";
    }

} 

您想要设置innerHTML属性。

作为旁注,我建议使用jQuery javascript框架(http://jquery.com/),因为它使这样的任务变得更加简单。

答案 2 :(得分:0)

您必须使用innerHTML才能更改元素的内容。 有一种误解btw:

function priceText(sel) // <- but why pass sel here??
{
    sel = document.getElementById('listingtype'); // <- when you select it here
    var priceDesc = document.getElementById('pricedesc');
    if ( sel.options[sel.selectedIndex].value == "Residential Letting" ) {
      priceDesc.innerHTML = "Enter price per month";
    }
    else if ( sel.options[sel.selectedIndex].value == "Short Let" ) {
      priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Serviced Accommodation" ) {
      priceDesc.innerHTML = "Enter price per week";
    }
    else if ( sel.options[sel.selectedIndex].value == "Sale" ) {
      priceDesc.innerHTML = "Enter for sale price";
    }
}

Demo