根据页面加载时的下拉值显示文本框

时间:2019-08-30 20:13:53

标签: javascript jquery

我需要基于页面加载的下拉菜单上选择的值显示一个文本框。

我的下拉菜单的

id-#inputtype 文本框的ID为#checkboxvalues。

我只是在做简单的“如果输入类型是复选框,请显示复选框值。

它似乎不起作用。 但是on(change)函数可以正常工作。也就是说,如果我将下拉列表更改为其他内容,然后选择“复选框,它将显示正确的文本框。

感谢您的宝贵时间。

$(document).ready(function(){
    var inputtype = $( "#inputtype" ).val();
    if (inputtype === "Checkbox"){
        $("#checkboxvalues").show();
    }
    if (inputtype != "Checkbox"){
        $("#checkboxvalues").hide();
    }
    if (inputtype != "Radio"){
        $("#radiovalues").hide();
    }
    if (inputtype != "Checkbox with Other"){
        $("#checkboxvalues").hide();
    }
    if (inputtype != "Radio with Other"){
        $("#radiovalues").hide();
    }


    $('#inputtype').on('change',function(){
        var inputtype = $( "#inputtype" ).val();
        if (inputtype === "Checkbox"){
            $("#checkboxvalues").show();
            $("#radiovalues").hide();
        } else if (inputtype === "Radio") {
            $("#radiovalues").show();
            $("#checkboxvalues").hide();
        }  else if (inputtype === "Checkbox with Other") {
            $("#checkboxvalues").show();
            $("#radiovalues").hide();
        }  else if (inputtype === "Radio with Other") {
            $("#radiovalues").show();
            $("#checkboxvalues").hide();
        } 
        else {
            $("#checkboxvalues").hide();
            $("#radiovalues").hide();
        }
    });

});

这是表格部分

                        <Li>
                            Field input type  : 
                            <select name="fieldinputtype" id="inputtype">
                                <option value="Text Box" <% if (editedsitefield.fieldinputtype == "Text Box") { %> Selected <% } %>>Text Box</option>
                                <option value="Text Area" <% if (editedsitefield.fieldinputtype == "Text Area") { %> Selected <% } %>>Text Area</option>
                                <option value="Checkbox" <% if (editedsitefield.fieldinputtype == "Checkbox") { %> Selected <% } %>>Checkbox</option>
                                <option value="Radio" <% if (editedsitefield.fieldinputtype == "Radio") { %> Selected <% } %>>Radio</option>
                                <option value="TextBox with Checkbox" <% if (editedsitefield.fieldinputtype == "TextBox with Checkbox") { %> Selected <% } %>>TextBox with Checkbox</option>
                                <option value="TextBox with Radio" <% if (editedsitefield.fieldinputtype == "TextBox with Radio") { %> Selected <% } %>>TextBox with Radio</option>
                                <option value="Checkbox with Other" <% if (editedsitefield.fieldinputtype == "Checkbox with Other") { %> Selected <% } %>>Checkbox with Other</option>                                
                                <option value="Radio with Other" <% if (editedsitefield.fieldinputtype == "Radio with Other") { %> Selected <% } %>>Radio with Other</option>                                
                            </select>
                        </Li>
                        <Li id="checkboxvalues">
                            Checkbox Values:
                            <input class="admstudyinput" type="text" name="checkboxvalues" value="<%= editedsitefield.checkboxvalues %>">
                        </Li>

3 个答案:

答案 0 :(得分:1)

这应该有效,

var inputtype = $( "#inputtype option:selected" ).val();

希望有帮助!

尝试使用数组而不是比较每个单独的文本(editedsitefield.fieldinputtype == "Text Box"),即将“文本框”之类的值存储在数组中,循环遍历。

答案 1 :(得分:1)

您要在此行的加载功能中隐藏文本框:

if (inputtype != "Checkbox with Other"){
    $("#checkboxvalues").hide();
}

作为代码检查的问题,您可能希望将所有逻辑放在一个函数中,因此只调用一次即可。

$(document).ready(function(){
    function updateInputs() {
        var inputtype = $( "#inputtype" ).val();
        $("#checkboxvalues").toggle(inputtype === "Checkbox" || inputtype === "Checkbox with Other");
        $("#radiovalues").toggle(inputtype === "Radio" || inputtype === "Radio with Other");
    }
    updateInputs();
    $('#inputtype').on('change', updateInputs);    
});

答案 2 :(得分:0)

您的代码应该可以使用。您确定<%= editedsitefield.checkboxvalues%>返回要比较的值吗?

您还可以通过删除重复的行并将其移入功能来优化代码,如下所示:

import requests
from bs4 import BeautifulSoup
import unicodecsv as csv


urls = []
l1 = []


for page in range(1,5):
result = requests.get("https://www.nykaa.com/skin/moisturizers/serums-essence/c/8397?root=nav_3&page_no=" + str(page))
src = result.content

soup = BeautifulSoup(src,'lxml')

for div_tag in soup.find_all("div", class_ = "card-wrapper-container col-xs-12 col-sm-6 col-md-4"):
    for div1_tag in soup.find_all("div", class_ = "product-list-box card desktop-cart"):
        h2_tag = div1_tag.find("h2").find("span")
        price_tag = div1_tag.find("div", class_ = "price-info")
        l1 = [h2_tag.get_text(),price_tag.get_text()]
        urls.append(l1)

        #print(urls)


with open('xyz.csv', 'wb') as myfile:
     wr = csv.writer(myfile)
     wr.writerows(urls)

P.S。尝试避免在html属性$(document).ready(function(){ function checkInputs() { var inputtype = $("#inputtype").val(); var $checkbox = $("#checkboxvalues"); var $radio = $("#radiovalues"); if (inputtype === "Checkbox"){ $checkbox.show(); } if (inputtype != "Checkbox"){ $checkbox.hide(); } if (inputtype != "Radio"){ $radio.hide(); } if (inputtype != "Checkbox with Other"){ $checkbox.hide(); } if (inputtype != "Radio with Other"){ $radio.hide(); } } checkInputs(); // calling function when document is ready $('#inputtype').on('change', function(){ checkInputs(); // calling function on change event }); }); 中以大写字母开头的单词,请使用Selected