Проблема с управлением выпадающим длинным меню с помощью функции выбора размера - PullRequest
Новая
       35

Проблема с управлением выпадающим длинным меню с помощью функции выбора размера

0 голосов
/ 08 октября 2018

Я использую раскрывающееся меню с опцией поиска, которая исключает поиск по короткому коду (основываясь на моем последнем сообщении: Как игнорировать шорткод при текстовом поиске html ).По сути, он должен выглядеть следующим образом Страница выбора страны :

Теперь у меня есть очень длинное раскрывающееся меню, которым я хотел бы управлять в контролируемом окне, и я подумал, что с помощьюФункция выбора размера будет работать для меня.К сожалению, это не ...

Пожалуйста, смотрите следующие скриншоты и коды, описывающие проблему.1. Это тот, который работает хорошо, но с очень длинным списком (без функции выбора размера): Рабочий код, но длинный список И код:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
     .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block}
}


#myInput {
    border-box: box-sizing;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.Country {
    position: relative;
    display: inline-block;
}

.Country-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

.Country-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.Country a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>


<div class="Country">
<button onclick="myFunction()" class="dropbtn">Country</button>
  <div id="myCountry" class="Country-content">
    <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()">
 <a href="/professional-network/asia/Afghanistan">[flag=af]  <span>Afghanistan</span></a>   
  <a href="/professional-network/asia/Armenia">[flag=am]   <span>Armenia</span></a>  
  <a href="/professional-network/asia/Azerbaijan">[flag=az]   <span>Azerbaijan</span></a>  
  <a href="/professional-network/asia/Bahrain">[flag=bh]   <span>Bahrain</span></a>  
  <a href="/professional-network/asia/Bangladesh">[flag=bd]   <span>Bangladesh</span></a>  
  <a href="/professional-network/asia/Bhutan">[flag=bt]   <span>Bhutan</span></a>  
  <a href="/professional-network/asia/Brunei">[flag=bn]   <span>Brunei</span></a>  
  <a href="/professional-network/asia/Cambodia">[flag=kh]   <span>Cambodia</span></a>  
  <a href="/professional-network/asia/Cyprus">[flag=cy]   <span>Cyprus</span></a>  
  <a href="/professional-network/asia/East Timor">[flag=tl]   <span>East Timor</span></a>  
  <a href="/professional-network/asia//Georgia">[flag=ge]   <span>Georgia</span></a>  
  <a href="/professional-network/asia/India">[flag=in]   <span>India</span></a>  
  <a href="/professional-network/asia/Indonesia">[flag=id]   <span>Indonesia</span></a>  
  <a href="/professional-network/asia/Iran">[flag=ir]   <span>Iran</span></a>  
  <a href="/professional-network/asia/Iraq">[flag=iq]   <span>Iraq</span></a>  
  <a href="/professional-network/asia/Israel">[flag=il]   <span>Israel</span></a>  
  <a href="/professional-network/asia/Japan">[flag=jp]   <span>Japan</span></a>  
  <a href="/professional-network/asia/Jordan">[flag=jo]   <span>Jordan</span></a>  
  <a href="/professional-network/asia/Kazakhstan">[flag=kz]   <span>Kazakhstan</span></a>  
  <a href="/professional-network/asia/Kuwait">[flag=kw]   <span>Kuwait</span></a>  
  <a href="/professional-network/asia/Kyrgyzstan">[flag=kg]   <span>Kyrgyzstan</span></a>  
  <a href="/professional-network/asia/Laos">[flag=la]   <span>Laos</span></a>  
  <a href="/professional-network/asia/Lebanon">[flag=lb]   <span>Lebanon</span></a>  
  <a href="/professional-network/asia/Malaysia">[flag=my]   <span>Malaysia</span></a>  
  <a href="/professional-network/asia/Maldives">[flag=mv]   <span>Maldives</span></a>  
  <a href="/professional-network/asia/Mongolia">[flag=mn]   <span>Mongolia</span></a>  
  <a href="/professional-network/asia/Myanmar">[flag=mm]   <span>Myanmar</span></a>  
  <a href="/professional-network/asia/Nepal">[flag=np]   <span>Nepal</span></a>  
  <a href="/professional-network/asia/North Korea">[flag=kp]   <span>North Korea</span></a>  
  <a href="/professional-network/asia/Oman">[flag=om]   <span>Oman</span></a>  
  <a href="/professional-network/asia/Pakistan">[flag=pk]   <span>Pakistan</span></a>  
  <a href="/professional-network/asia/China">[flag=cn]   <span>China</span></a>  
    <a href="/professional-network/asia/The Philippines">[flag=ph]   <span>The Philippines</span></a>  
  <a href="/professional-network/asia/Qatar">[flag=qa]   <span>Qatar</span></a>  
  <a href="/professional-network/asia/Taiwan">[flag=tw]   <span>Taiwan</span></a>  
  <a href="/professional-network/asia/Russia">[flag=ru]   <span>Russia</span></a>  
  <a href="/professional-network/asia/Saudi Arabia">[flag=sa]   <span>Saudi Arabia</span></a>  
  <a href="/professional-network/asia/Singapore">[flag=sg]   <span>Singapore</span></a>  
  <a href="/professional-network/asia/China">[flag=sg]   <span>China</span></a>  
  <a href="/professional-network/asia/South Korea">[flag=kr]   <span>South Korea</span></a>  
  <a href="/professional-network/asia/Sri Lanka">[flag=lk]   <span>Sri Lanka</span></a>  
  <a href="/professional-network/asia/Syria">[flag=sy]   <span>Syria</span></a>  
  <a href="/professional-network/asia/Tajikistan">[flag=tj]   <span>Tajikistan</span></a>  
  <a href="/professional-network/asia/Thailand">[flag=th]   <span>Thailand</span></a>  
  <a href="/professional-network/asia/The United Arab Emirates">[flag=ae]   <span>The United Arab Emirates</span></a>  
  <a href="/professional-network/asiaTurkey">[flag=tr]   <span>Turkey</span></a>  
  <a href="/professional-network/asia/Turkmenistan">[flag=tm]   <span>Turkmenistan</span></a>  
  <a href="/professional-network/asia/Uzbekistan">[flag=uz]   <span>Uzbekistan</span></a>  
  <a href="/professional-network/asia/Vietnam">[flag=vn]   <span>Vietnam</span></a>  
  <a href="/professional-network/asia/Yemen">[flag=ye]   <span>Yemen</span></a>  
  </div>
</div>

<script>
function myFunction() {
    document.getElementById("myCountry").classList.toggle("show");
}

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myCountry");
    a = div.getElementsByTagName("a");
    
    for (i = 0; i < a.length; i++) {
        var label = a[i].querySelector('span');
        if (label.innerText.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

</script>

</body>
</html>
Это тот, который использует функцию выбора размера, но с ошибками и не работает (сломал поиск, флаги, дизайн и не открывается должным образом на веб-сайте): Проблема с кодом Икод: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
     .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block}
}


#myInput {
    border-box: box-sizing;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.Country {
    position: relative;
    display: inline-block;
}

.Country-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

.Country-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.Country a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>


<div class="Country">
<button onclick="myFunction()" class="dropbtn">Country</button>
  <div id="myCountry" class="Country-content">
    <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()">
<select size="20">
     <option><a href="/professional-network/asia/Afghanistan">[flag=af]  <span>Afghanistan</span></a>   
<option><a href="/professional-network/asia/Armenia">[flag=am]   <span>Armenia</span></a>  
<option><a href="/professional-network/asia/Azerbaijan">[flag=az]   <span>Azerbaijan</span></a>  
<option><a href="/professional-network/asia/Bahrain">[flag=bh]   <span>Bahrain</span></a>  
<option><a href="/professional-network/asia/Bangladesh">[flag=bd]   <span>Bangladesh</span></a>  
<option><a href="/professional-network/asia/Bhutan">[flag=bt]   <span>Bhutan</span></a>  
<option><a href="/professional-network/asia/Brunei">[flag=bn]   <span>Brunei</span></a>  
<option><a href="/professional-network/asia/Cambodia">[flag=kh]   <span>Cambodia</span></a></option>
<option><a href="/professional-network/asia/Cyprus">[flag=cy]   <span>Cyprus</span></a></option>
<option><a href="/professional-network/asia/East Timor">[flag=tl]   <span>East Timor</span></a></option>
<option><a href="/professional-network/asia//Georgia">[flag=ge]   <span>Georgia</span></a></option>
<option><a href="/professional-network/asia/India">[flag=in]   <span>India</span></a></option>
<option><a href="/professional-network/asia/Indonesia">[flag=id]   <span>Indonesia</span></a></option>
<option><a href="/professional-network/asia/Iran">[flag=ir]   <span>Iran</span></a></option>
<option><a href="/professional-network/asia/Iraq">[flag=iq]   <span>Iraq</span></a></option>
<option><a href="/professional-network/asia/Israel">[flag=il]   <span>Israel</span></a></option>
<option><a href="/professional-network/asia/Japan">[flag=jp]   <span>Japan</span></a></option>
<option><a href="/professional-network/asia/Jordan">[flag=jo]   <span>Jordan</span></a></option>
<option><a href="/professional-network/asia/Kazakhstan">[flag=kz]   <span>Kazakhstan</span></a></option>
<option><a href="/professional-network/asia/Kuwait">[flag=kw]   <span>Kuwait</span></a></option>
<option><a href="/professional-network/asia/Kyrgyzstan">[flag=kg]   <span>Kyrgyzstan</span></a></option>
<option><a href="/professional-network/asia/Laos">[flag=la]   <span>Laos</span></a></option>
<option><a href="/professional-network/asia/Lebanon">[flag=lb]   <span>Lebanon</span></a></option>
<option><a href="/professional-network/asia/Malaysia">[flag=my]   <span>Malaysia</span></a></option>
<option><a href="/professional-network/asia/Maldives">[flag=mv]   <span>Maldives</span></a></option>
<option><a href="/professional-network/asia/Mongolia">[flag=mn]   <span>Mongolia</span></a></option>
<option><a href="/professional-network/asia/Myanmar">[flag=mm]   <span>Myanmar</span></a></option>
<option><a href="/professional-network/asia/Nepal">[flag=np]   <span>Nepal</span></a></option>
<option><a href="/professional-network/asia/North Korea">[flag=kp]   <span>North Korea</span></a></option>
<option><a href="/professional-network/asia/Oman">[flag=om]   <span>Oman</span></a></option>
<option><a href="/professional-network/asia/Pakistan">[flag=pk]   <span>Pakistan</span></a></option>
<option><a href="/professional-network/asia/China">[flag=cn]   <span>China</span></a></option>
<option><option><a href="/professional-network/asia/The Philippines">[flag=ph]   <span>The Philippines</span></a></option>
<option><a href="/professional-network/asia/Qatar">[flag=qa]   <span>Qatar</span></a></option>
<option><a href="/professional-network/asia/Taiwan">[flag=tw]   <span>Taiwan</span></a></option>
<option><a href="/professional-network/asia/Russia">[flag=ru]   <span>Russia</span></a></option>
<option><a href="/professional-network/asia/Saudi Arabia">[flag=sa]   <span>Saudi Arabia</span></a></option>
<option><a href="/professional-network/asia/Singapore">[flag=sg]   <span>Singapore</span></a></option>
<option><a href="/professional-network/asia/China">[flag=sg]   <span>China</span></a></option>
<option><a href="/professional-network/asia/South Korea">[flag=kr]   <span>South Korea</span></a></option>
<option><a href="/professional-network/asia/Sri Lanka">[flag=lk]   <span>Sri Lanka</span></a></option>
<option><a href="/professional-network/asia/Syria">[flag=sy]   <span>Syria</span></a></option>
<option><a href="/professional-network/asia/Tajikistan">[flag=tj]   <span>Tajikistan</span></a></option>
<option><a href="/professional-network/asia/Thailand">[flag=th]   <span>Thailand</span></a></option>
<option><a href="/professional-network/asia/The United Arab Emirates">[flag=ae]   <span>The United Arab Emirates</span></a></option>
<option><a href="/professional-network/asiaTurkey">[flag=tr]   <span>Turkey</span></a></option>
<option><a href="/professional-network/asia/Turkmenistan">[flag=tm]   <span>Turkmenistan</span></a></option>
<option><a href="/professional-network/asia/Uzbekistan">[flag=uz]   <span>Uzbekistan</span></a></option>
<option><a href="/professional-network/asia/Vietnam">[flag=vn]   <span>Vietnam</span></a></option>
<option><a href="/professional-network/asia/Yemen">[flag=ye]   <span>Yemen</span></a>  
  </div>
</div>

<script>
function myFunction() {
    document.getElementById("myCountry").classList.toggle("show");
}

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myCountry");
    a = div.getElementsByTagName("a");
    
    for (i = 0; i < a.length; i++) {
        var label = a[i].querySelector('span');
        if (label.innerText.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

</script>

</body>
</html>

Очевидно, я сделал что-то не так, поэтому, если вы можете помочь мне исправить это, я буду очень признателен!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...