Drop Down menu not opening - html

Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
Im trying to figure out why my Drop Down menu is not working. It does appear but when i click on it, it doesn't drop down. Any help would be highly appreciated,
Thanks!
<div class="form-group row">
<label for="location" class="col-sm-3 control-label">Job Location</label>
<div class="col-sm-9">
<select id="location" name="job_location" multiple="" data-placeholder="Enter city and country or leave it blank" class="form-control form-control-chosen jform-chosen-validate" style="display: none;">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 795px;" title="" id="location_chosen"><ul class="chosen-choices"><li class="search-field">
<input type="text" value="Enter a city and country or leave it blank" class="default" autocomplete="off" style="width: 279px;"></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div></div>
</div>
</div>


removing the display:none
according to your code you are using bootstrap after removing it if it not working check the jquery and javascript links pattern
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


you have style display:none on it change it to block
or you could opt for a (small bit of js) option and go for this
Here is a fiddle
var mytextbox = document.getElementById('country');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value= " ";
mytextbox.value = mytextbox.value + this.value;
}
textarea, select{display:block; vertical-align:top; height:27px;}
<select id="dropdown">
<option value="aichach">Aichach</option>
<option value="allende">Allende</option>
<option value="atlanta">Atlanta</option>
<option value="bangalore">bangalore</option>
<option value="berlin">Berlin</option>
<option value="bristol">bristol</option>
<option value="calgary">Calgary</option>
<option value="california">California</option>
<option value="campuchia">Campuchia</option>
<option value="carapicuiba-sao-paulo">Carapicuíba - São Paulo</option>
<option value="conakry">Conakry</option>
<option value="dallas">Dallas</option>
<option value="dubai">Dubai</option>
<option value="fortaleza">Fortaleza</option>
<option value="guinea">Guinea</option>
<option value="ha-noi">Ha Noi</option>
<option value="hamburg">Hamburg</option>
<option value="india">india</option>
<option value="istanbul">istanbul</option>
<option value="jacksonville">Jacksonville</option>
<option value="kathmandu">Kathmandu</option>
<option value="kk">kk</option>
<option value="latur">latur</option>
<option value="lll">lll</option>
<option value="london">London</option>
<option value="manila">Manila</option>
<option value="melbourne">Melbourne</option>
<option value="montreal">montreal</option>
<option value="new-york">New York</option>
<option value="newcastle">Newcastle</option>
<option value="nigeria">Nigeria</option>
<option value="noordwijk">Noordwijk</option>
<option value="philippines">Philippines</option>
<option value="san-gwann">San Gwann</option>
<option value="scotland">Scotland</option>
<option value="sydney">Sydney</option>
<option value="tourcoin">Tourcoin</option>
<option value="vienna-austria">Vienna, Austria</option>
<option value="wroclaw">Wrocław</option>
<option value="zxczxc">zxczxc</option>
<option value="zxczxvzxv">zxczxvzxv</option>
</select>
<textarea id="country"></textarea>
Ref

Related

how to display year in drop down using html?

Below is html code I wrote. how do i edit it in html such that the word year appears on the drop down box for it? So far it displays 2020.
<select class="" name="year" required>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>

Unlike input elements, select does not have a "placeholder" so you have to add it in as option, but if you don't want users to select it you can place the disabled attribute.
<select class="" name="year" required>
<option value="" disabled selected>Select Year</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>

Save input Chrome extension

so I am creating an html where the user has to input data that is going to be stored and then auto pasted (autofill). So I am trying to store it (function at top) and it stores it (seen in the link of the live server) but it wont write it down for a check to see that it works but it don't.
And can you give me a tip how to paste it after ?
PS: Doing this in a popup that's why its so unordered.
And when I normaly open the html in live or as a extension the button appears, but when uploading this html it doesn't.
(ADD)= Searched for errors and saw one when pressing button, recorded it and took a screenshot +
Thank you in advance.
enter image description here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dropdown.css">
</head>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
</head>
<head>
<script>
var
function save()
{
var first_name = document.getElementById("first name").value;
var last_name = document.getElementById("last name").value;
var email = document.getElementById("email").value;
var street_address = document.getElementById("street address").value;
var house_number = document.getElementById("house number").value;
var apartment = document.getElementById("apartment").value;
var postal_code = document.getElementById("postal code").value;
var city = document.getElementById("city").value;
document.write("Data: " + first_name + last_name + email + street_address + house_number +apartment +postal_code + city);
}
</script>
</head>
<form action="" method="GET">
<div>
<label for="first name" >First Name</label>
<input id="first name" type="first name" name='first name' placeholder="Enter your first name here" required>
</div>
<div>
<label for="last name">Last Name</label>
<input id="last name" type="last name" name='last name' placeholder="Enter your last name here" required>
</div>
E-Mail
<div>
<label for="email"></label>
<input id="email" type="email" name='email' placeholder="Enter your E-Mail here" required>
</div>
<div>
<label for="street address">Street Address</label>
<input id="street address" type="street address" name='street address' placeholder="Enter your address here" required>
</div>
<div>
<label for="house number">House Number</label>
<input id="house number" type="house number " name='house number' placeholder="Enter yout house number here" >
<div>
<div>
<label for="apartment">Apartment (optional)</label>
<input id="apartment" type="apartment" name='apartment' placeholder="Enter apartment (optional)">
</div>
<div>
<label for="postal code">Postal code</label>
<input type="postal code" name='postal code' placeholder="Enter your postal code here" required>
</div>
City
<div>
<label for="city"></label>
<input id="city" type="city" name='city' placeholder="Enter your city here" required>
</div>
<!---Dropdown Country-->
<body>
Country
<div>
<select name="" id="input" onchange="lel()" class="dropdown">
<option value="albania">Albania</option>
<option value="algeria">Algeria</option>
<option value="andorra">Andorra</option>
<option value="austria">Austria</option>
<option value="bahrain">Bahrain</option>
<option value="bangladesh">Bangladesh</option>
<option value="belarus">Belarus</option>
<option value="begium">Belgium</option>
<option value="bhutan">Bhutan</option>
<option value="bosnia">Bosnia & Heryegovina</option>
<option value="brunei">Brunei</option>
<option value="bulgaria">Bulgaria</option>
<option value="cambodia">Cambodia</option>
<option value="canada">Canada</option>
<option value="china">China</option>
<option value="croatia">Croatia</option>
<option value="cyperus">Cyperus</option>
<option value="czechia">Czechia</option>
<option value="denmark">Denmark</option>
<option value="egypt">Egypt</option>
<option value="estonia">Estonia</option>
<option value="faroe">Faroe Islands</option>
<option value="finland">Finland</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="gibraltar">Gibraltar</option>
<option value="greece">Greece</option>
<option value="greenland">Greenland</option>
<option value="hong kong sar china">Hong Kong SAR China</option>
<option value="hungary">Hungary</option>
<option value="iceland">Iceland</option>
<option value="india">India</option>
<option value="indonesia">Indonesia</option>
<option value="ireland">Ireland</option>
<option value="israel">Israel</option>
<option value="italy">Italy</option>
<option value="japan">Japan</option>
<option value="jordan">Jordan</option>
<option value="kuwait">Kuwait</option>
<option value="laos">Laos</option>
<option value="latvia">Latvia</option>
<option value="lebanon">Lebanon</option>
<option value="libya">Libya</option>
<option value="liechtenstein">Liechtenstein</option>
<option value="lithuania">Lithuania</option>
<option value="luxembourg">Luxembourg</option>
<option value="macao sar china">Macao SAR China</option>
<option value="malaysia">Malaysia</option>
<option value="malta">Malta</option>
<option value="mexico">Mexico</option>
<option value="moldova">Moldova</option>
<option value="monaco">Monaco</option>
<option value="montenegro">Montenegro</option>
<option value="morocco">Morocco</option>
<option value="myanmar (burma)">Myanmar (Burma(</option>
<option value="nepal">Nepal</option>
<option value="netherlands">Netherlands</option>
<option value="new zealand">New Zealand</option>
<option value="north macedonia">North Macedonia</option>
<option value="norway">Norway</option>
<option value="omanm">Oman</option>
<option value="parkistan">Parkistan</option>
<option value="palestinian territories">Palestinian Territories</option>
<option value="poland">Poland</option>
<option value="portugal">Portugal</option>
<option value="qatar">Qatar</option>
<option value="romania">Romania</option>
<option value="saudi arabia">Saudi Arabia</option>
<option value="singapore">Singapore</option>
<option value="slovakia">Slovakia</option>
<option value="slovenia">Slovenia</option>
<option value="south korea">South Korea</option>
<option value="spain">Spain</option>
<option value="sri lanka">Sri Lanka</option>
<option value="sweden">Sweden</option>
<option value="switzerland">Switzerland</option>
<option value="syria">Syria</option>
<option value="taiwan">Taiwan</option>
<option value="thailand">Thailand</option>
<option value="timor-leste">Timor-Leste</option>
<option value="tunisia">Tunisia</option>
<option value="turkey">Turkey</option>
<option value="ukraine">Ukraine</option>
<option value="united arab emirates">United Arab Emirates</option>
<option value="united kingdom">United Kingdom</option>
<option value="united states">United States</option>
<option value="vatican city">Vatican City</option>
<option value="vietnam">Vietnam</option>
<option value="yemen">Yemen</option>
</select>
</div>
<!---Dropdown Country-->
State/Province
<div>
<select name="" id="shis" class="dropdowntwo">
<option value="none" disabled selected value>None</option>
<optgroup value="united states states"label="--------------United States--------------">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="American Samoa">American Samoa</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="Arkansas">Arkansas</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">District of Columbia</option>
<option value="Federated States of Micronesia">Federated States of Micronesia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Guam">Guam</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Lowa">Lowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Luoisiana">Luoisiana</option>
<option value="Luoisiana">Luoisiana</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nepraska">Nepraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakato">North Dakato</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Palau">Palau</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Islands">Rhode Islands</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Armed Forces Americas">Armed Forces Americas</option>
<option value="Armed Forces Europe">Armed Forces Europe</option>
<option value="Armed Forces Pacific">Armed Forces Pacific</option>
</optgroup>
<optgroup value="canada states"label="------------------Canada------------------">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</div>
<p><button class="button" onclick="save()">Save</button></p>
</body>
</form>
</html>

How to set size of Materialize select element?

Regarding the Materialize select element, I would expect the number of options visible to be 5, yet this is not the case.
I have also tried to set the height but no luck either.
<div class="input-field col s4">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
Thank you

Materialize uses a dropdown for the select options (it is in fact a dropdown triggered by a text input). So you need to target the dropdown class:
.select-dropdown {
height: 300px;
}
https://codepen.io/doughballs/pen/NWWGNMq

You can simply specify it in the wrapping div here my example is 300px
https://codepen.io/mxnelles/pen/GRJeXGd
<div class="input-field col s4" style="width:300px">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>

getting special characters in select option in chrome

I am getting special characters in select option for chrome only.
<div class="ius-text-input-container first-name-input name-input">
<div class="styled-select expiry-period complete">
<select name="billingState" id="billingState" placeholder="state" style="border-color: rgb(158, 158, 158);">
<option value="State">State</option>
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="FM">FM</option>
<option value="GA">GA</option>
<option value="GU">GU</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MP">MP</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
</div>
</div>

How to prevent newline/line break within a <form></form>?

This is my code.
<form name="publish">
<?php include 'location.selector.html'; ?>
<input type="submit" value="submit"/> </form>
When displayed, there is a newline preceding the
submit
button, how to eliminate this newline/line break?
The HTML content of location.selector.html is
<table><tr><td>都道府県を選択してください</td>
<td>市区町村を選択してください</td></tr>
<tr><td align="center">
<SELECT name="pref" onChange="changePref(true)">
<OPTION VALUE="99">全国
<OPTION VALUE="0">北海道
<OPTION VALUE="1">青森県
<OPTION VALUE="2">岩手県
<OPTION VALUE="3">宮城県
<OPTION VALUE="4">秋田県
<OPTION VALUE="5">山形県
<OPTION VALUE="6">福島県
<OPTION VALUE="7">茨城県
<OPTION VALUE="8">栃木県
<OPTION VALUE="9">群馬県
<OPTION VALUE="10">埼玉県
<OPTION VALUE="11">千葉県
<OPTION VALUE="12">東京都
<OPTION VALUE="13">神奈川県
<OPTION VALUE="14">新潟県
<OPTION VALUE="15">富山県
<OPTION VALUE="16">石川県
<OPTION VALUE="17">福井県
<OPTION VALUE="18">山梨県
<OPTION VALUE="19">長野県
<OPTION VALUE="20">岐阜県
<OPTION VALUE="21">静岡県
<OPTION VALUE="22">愛知県
<OPTION VALUE="23">三重県
<OPTION VALUE="24">滋賀県
<OPTION VALUE="25">京都府
<OPTION VALUE="26">大阪府
<OPTION VALUE="27">兵庫県
<OPTION VALUE="28">奈良県
<OPTION VALUE="29">和歌山県
<OPTION VALUE="30">鳥取県
<OPTION VALUE="31">島根県
<OPTION VALUE="32">岡山県
<OPTION VALUE="33">広島県
<OPTION VALUE="34">山口県
<OPTION VALUE="35">徳島県
<OPTION VALUE="36">香川県
<OPTION VALUE="37">愛媛県
<OPTION VALUE="38">高知県
<OPTION VALUE="39">福岡県
<OPTION VALUE="40">佐賀県
<OPTION VALUE="41">長崎県
<OPTION VALUE="42">熊本県
<OPTION VALUE="43">大分県
<OPTION VALUE="44">宮崎県
<OPTION VALUE="45">鹿児島県
<OPTION VALUE="46">沖縄県
</SELECT></td><td align="center">
<SELECT NAME="city">
<OPTION VALUE="99" SELECTED>全地区
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT></td></tr></table>

Include the table before your form tag or use try using below CSS:
<style type="text/css">
form, table {
display:inline;
margin:0px;
padding:0px;
}
</style>

It's been awhile since I did CSS but try the
display:inline
style.