issue with making a <select> box bringing you to another page - html

Hey guys so I am trying to create a quick search with the boxes. I thought I could just put in some tags but does not work so I was wondering how I would go about doing this?
Here is my code:
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div><!-- END #advancesearch -->

Why don't you use JavaScript window.location?
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option value="Microphones" onclick="window.location='http://www.google.com'">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
Or create a function
<div id="advancesearch">
<div class="audio-quicksearch">
<select>
<option></option>
<option value="Microphones" onclick="redirect_me('http://www.google.com');">Microphones</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</div>
</div>
<script>
function redirect_me(re_link) {
window.location = re_link;
}
</script>

Related

Get closest textarea attribute id after select list change

I am new to jquery, am working on small task. I'm trying to find closest textarea attribute id but get undefined.
<div class="input-label-f">
<div class="select2-wrap">
<select class="variables_select" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<div class="input-box">
<textarea id="email_admin_textarea" class="input-field"></textarea>
</div>
$('.variables_select').change(function(){
var input = $(this).closest('textarea').attr('id');
});
you need to add both select and textarea in same div for reference
$('.variables_select').change(function(){
var input = $(this).closest('.input-label-f').find('textarea').attr('id');
console.log(input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-label-f">
<div class="select2-wrap">
<select class="variables_select" name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="input-box">
<textarea id="email_admin_textarea" class="input-field"></textarea>
</div>
</div>

Dropdown is not showing after a page reloads

I have three dropdowns in my page, two of them are shown perfectly while the other one is not appearing, and when looking at the element in page it gets loaded with the "style="display: none;" value even if I'm forcing it with style="display: inline;".
Here's the code:
<div class="dropdown">
<div id="myBrokenDropdown" class="dropdown-content">
<select class='filter' id="notWorkingOne">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<!--select button-->
<div id="select1" class="dropdown-content">
<select class='filter' id="select1Works" data-col="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<div id="select2" class="dropdown-content">
<select class='filter' id="select2Works" data-col="5">
<option value=""> Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
</div>
Also, in jquery I can hide/Show the two dropdowns with the following code:
$('#select1Works').hide();
$('#select2Works').hide();
$('#notWorkingOne').hide();
$(document).ready(function() {
$("input[type='radio']").on('change', function() {
$("#select1Works").toggle($("[name=radioButton]").index(this) === 0);
$("#select2Works").val("").trigger("change");
$("#select2Works").toggle($("[name=radioButton]").index(this) === 1);
$("#select1Works").val("").trigger("change");
if ($('#select1Works').is(':visible') || $('#select2Works').is(':visible')) {
$('#notWorkingOne').show();
}
})
});
Why is the "myBrokenDropdown" not showing?
Thank you very much
It was an issue with a selector in my actual code, I missed a '#'.

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>

Select box not showing properly on a survey form

​div{
padding: 10px;
}
<div>
Occupation: <select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</div>
I'm not sure what I'm doing wrong and why is the first select box working and the other one isn't
This is what it looks like:
You should close your div and select tags.
​div{
padding: 10px;
}
<div>
Occupation: <select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</select>
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</select>
</div>
</div>
You are missing the closing tag of your first <select>:
​div{
padding: 10px;
}
<div>
Occupation:
<select name="occupation">
<option value="student1">Student (high school or less)</option>
<option value = "student2">University student</option>
<option value = "unemployed">Unemployed</option>
<option value="intern">Internship</option>
<option value="full-time">Full Time Job</option>
<option value="retired">In Retirement</option>
</select> <!-- was missing -->
</div>
<div>
What do you like the most about our product? <select name="likes">
<option value="look">The Look</option>
<option value="functionality">Functionality</option>
<option value="usefulness">Usefulness</option>
<option value="users">Other Users</option>
</div>

Drop Down menu not opening

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