I am having problem in my search box, actually i have created a search box for multiple selection and it is working properly,
<input type="text" name="search" size=15 maxlength=15 placeholder = "Gene Symbol"/>
<select name="table[]" size = "0" multiple>
<option selected="selected"></option>
<option value="infla_info">Inflammation</option>
<option value="diet_info">diet</option>
<option value="obesity_info">obesity</option>
<option value="stress_info">stress</option>
<option value="athero_info">atherosclerosis</option>
<option value="retino_info">Diabetic Retinopathy</option>
<option value="nephro_info">Diabetic Nephropathy</option>
<option value="neuro_info">Diabetic Neuropathy</option>
</select>
<input type="Submit" name="Submit" value="Gene Search"/>
after this i want to add one more option select all, by which it should show all the records or tables containing query gene.
please help me
try this
Jquery Code:
$('#selectall').click(function() {
$('#countries option').prop('selected', true);
});
Live Demo :
http://jsfiddle.net/3nUPF/177/
You can achieve this using jQuery :
EDIT :- You can select multiple value by pressing Ctrl button of your keyboard and you can get those value using print_r($_POST['countries']);
<select name="countries" id="countries" MULTIPLE size="8">
<option value="all">Select all</option>
<option value="UK">UK</option>
<option value="US">US</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="India">India</option>
<option value="China">China</option>
</select>
jQuery :
<script>
$(document).ready(function()
{
$('#countries').change(function() {
if($(this).val() == 'all')
{
$('#countries option').prop('selected', true);
}
});
});
</script>
Working Demo
Related
I want scroll button after i click on the Select your country textbox anyone know how to insert scroll button. Here my code :
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<label for='formCountry'>Select your country of residence</label><br>
<select name="formCountry">
<option value="">Select a country...</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="France">France</option>
<option value="Mexico">Mexico</option>
<option value="Russia">Russia</option>
<option value="Japan">Japan</option>
</select>
<input type="submit" name="formSubmit" value="Submit" />
</form>
Thanks in advance :)
it's automatic take scorll button in dropdown but if you still limit the showing option,than use below code :
apply height and overflow in css:
CSS:
.select{
height:100px;
overflow:scroll;
}
HTML:
<select name="formCountry" class="select">
<option value="">Select a country...</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="France">France</option>
<option value="Mexico">Mexico</option>
<option value="Russia">Russia</option>
<option value="Japan">Japan</option>
</select>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a form where i have two select box, second select box changes according to the first select box. Both select box is an array
example
<div id="data-container">
<select name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>
Please see the image for more details
If I change the select box first_select[1]" I want to change the value of second_select[1]
If I change the select box first_select[2]" I want to change the value of second_select[2]
i can add more select box by clicking the add more button
Please see the image
The following code should get you started:
$(document).on('change', 'select[name="first_select[]"]', function(){
var currentValue = $(this).val();
$(this).next('[name="second_select[]"]').val(currentValue);
});
The first thing I do is capture the value of the changed first_select. Then I traverse the DOM to the next second_select and change it's value to match the first one. This allows me to change pairs without knowing or needing the index of the changed select.
EXAMPLE
This code also covers you "adding more" selects as I used event delegation to make sure the change event is captured as it bubbles up the DOM.
Attribute Selectors
.val()
.change()
.next()
EDIT: OP changed the markup, requiring a different traversal of the DOM:
Given the following markup, where each drop-down is in a div having siblings:
<div>
<select name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>
<div>
<select name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
</div>
The jQuery would have to be changed to this:
$(document).on('change', 'select[name="first_select[]"]', function () {
var currentValue = $(this).val();
$(this).closest('div').next('div').find('[name="second_select[]"]').val(currentValue);
});
Here is the EXAMPLE
EDIT OP added yet another layer of complexity in the markup. Fortunately jQuery makes this easy, with only a couple of selectors needing changes. Here is the markup:
<div class="col-md-4">
<div class="form-group">
<label>Designation</label>
<select name="first_select[]" class="form-control author_designation" required="">
<option value="House Surgeon">House Surgeon</option>
<option value="Medical Officer">Medical Officer</option>
<option value="Private Practitioner">Private Practitioner</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Type</label>
<select name="second_select[]" class="form-control author_type" >
<option value="House Surgeon">House Surgeon</option>
<option value="Medical Officer">Medical Officer</option>
<option value="Private Practitioner">Private Practitioner</option>
</select>
</div>
</div>
The changes to the jQuery selectors come in the .closest() and .next() functions. I used the "starts with" selector on the div's class:
$(document).on('change', 'select[name="first_select[]"]', function () {
var currentValue = $(this).val();
$(this).closest('[class^="col"]').next('[class^="col"]').find('[name="second_select[]"]').val(currentValue);
});
EXAMPLE
give an dynamic id and data id to your select box once new select boxes add.
<select id="first_select_1" data-id="1" name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option1</option>
</select>
<select id="second_select_1" name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select id="first_select_2" data-id="2" name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select id="second_select_2" name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select id="first_select_3" data-id="3" name="first_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
<select id="second_select_3" name="second_select[]">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
</select>
then add this below jquery
$(document).ready(function(){
$('select').change(function(){
var data_val =$(this).attr('data-id');
$('#second_select_'+data_val).val( this.value).change();
})
});
I have an php form which contains 7 dropdown lists. When selecting a value from one of this I want the others 6 to return to their default values if they were previously opened. I think it should be used a javascript for this but I don't now to write such a script. I guess each of this dropdown list must have an ID and when I select an option from each one of the 7 the javascript should recognise the id and sets the other to default. I tried using a javascript with document.getElementsByName('id') but it doesn't work.
<form id="form1" name="form1" method="post" action="">
<select name="select" size="1" id="1">
<option value="0" selected="selected">please select</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">red</option>
</select>
<br />
<select name="select2" size="1" id="2">
<option value="0" selected="selected">please select</option>
<option value="1">intel</option>
<option value="2">amd</option>
</select>
<br />
<select name="select3" size="1" id="3">
<option value="0" selected="selected">please select</option>
<option value="1">fish</option>
<option value="2">car</option>
<option value="3">table</option>
</select>
<br />
<select name="select4" size="1" id="4">
<option value="0" selected="selected">please select</option>
<option value="1">lcd</option>
<option value="2">led</option>
</select>
</form>
This is my form.
Let's sey for example I select a value from the second dropdown list "intel". After this i select from the 3rd dropdown list a value "table". What i need to do is when selecting from the 3rd dropdownlist the second one returns to "please select".
The ideea is that using a javascript i do not want those who use the form to select more than one dropdown list at a time.
They should be able to see the values from each one opening the dropdown list but if they open another one the previously must return to the selected="selected" option which is "please select".
Thanks.
Here is a idea to start. Consider 2 dropdown like this.
<select id="Numeric">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="Alphabets">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Based on the value of 1st dropdown i am selecting the second dropdown
var val = document.getElementById("Numeric").value;
var obj = document.getElementById("Alphabets");
if(val == "1") obj.value = "A"
else if(val == "2") obj.value = "B"
else if(val == "3") obj.value = "C"
Switch is more better
switch(val)
{
case("1"):
obj.value = "A";
break;
case("2"):
obj.value = "B";
break;
case("3"):
obj.value = "C";
break;
}
This is very basic starup idea. You need to implement good logics for your needed functionality
Updated Answer after Comments
<html>
<head>
<script type="text/javascript">
function handleSelect(thisObj){
var list = document.getElementsByTagName("SELECT")
for(var i=0; i< list.length; i++)
{
if(list[i] ==thisObj) continue;
list[i].value = "0";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select name="select" size="1" id="1" onchange="handleSelect(this)">
<option value="0" selected="selected">please select</option>
<option value="1">blue</option>
<option value="2">green</option>
<option value="3">red</option>
</select>
<br />
<select name="select2" size="1" id="2" onchange="handleSelect(this)">
<option value="0" selected="selected">please select</option>
<option value="1">intel</option>
<option value="2">amd</option>
</select>
<br />
<select name="select3" size="1" id="3" onchange="handleSelect(this)">
<option value="0" selected="selected">please select</option>
<option value="1">fish</option>
<option value="2">car</option>
<option value="3">table</option>
</select>
<br />
<select name="select4" size="1" id="4" onchange="handleSelect(this)">
<option value="0" selected="selected">please select</option>
<option value="1">lcd</option>
<option value="2">led</option>
</select>
</form>
</body>
</html>
I run a simple form collecting 4 values, three of the values are listed in a dropdown. I'm wondering if I can write the values selected by a user to my mysql table prior to submitting the form.
The form looks like this:
<form id="search" action="" method="POST">
<input id="field1" type="text" name="to" value="">
<select name="day">
<option value="">Day</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
</select>
<select name="cym">
<option selected="" value="">Month</option>
<option value="2012-12">December 2012</option>
<option value="2013-01">January 2013</option>
<option value="2013-02">February 2013</option>
</select>
<select name="nights">
<option value="">Nights</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
</select>
<button onclick="document.getElementById('search').submit();">Search!</button>`
So, once the user selects the 'day', I want to write the value to the mysql, once the user select the 'cym' I want to write the value to the mysql and so on.
Can this be realized and if so how?
If you're using jQuery you can do something like this:
$("#cym").change(function () {
$.ajax({
url: 'serverUrl.php',
success: function(data) {
// nothing to be done here
}
});
});
The <select name="cym"> would become <select id="cym"> for the selector $("#cym") to work. This, of course, can be achieved by using raw Javascript and if that's your preferred approach you can have a look at http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first .
You can bind some onChange events to the select elements. You can easily use jQuery for that. Look at http://api.jquery.com/change/
I want to get the value of the dropdown. I am using msDropDown, but i am getting its value as undefined. The html as follows:
<select name="category[]"
id="webmenus_<?php echo $BPackageCityRelatedToCountry[$i]['city_id']; ?>"
onchange="showValue(this.value)"
>
<option value="0" selected="selected" title="Please select hotel category"></option>
<option value="5_<?php echo $BPackageCityRelatedToCountry[$i]['city_id']; ?>" title="/public/front_end/images/5star.png"></option>
<option value="4_<?php echo $BPackageCityRelatedToCountry[$i]['city_id']; ?>" title="/public/front_end/images/4star.png"></option>
<option value="3_<?php echo $BPackageCityRelatedToCountry[$i]['city_id']; ?>" title="/public/front_end/images/3star.png"></option>
<option value="2_<?php echo $BPackageCityRelatedToCountry[$i]['city_id']; ?>" title="/public/front_end/images/2star.png"></option>
<option value="1_<?php echo $BPackageCityRelatedToCountry[$i]['city_id']; ?>" title="/public/front_end/images/1star.png"></option>
</select>
jquery alert($("input[name='category[]']").val()); alerts as undefined.
How can i get the value of the dropdown?
Thanks,
$(":input[name='category[]']").val()
You use select instead of input
Edit your HTML and set the select Tag to mutiple
<select name="test" multiple>
<option value="1">ITEM 1</option>
<option value="2">ITEM 2</option>
<option value="3">ITEM 3</option>
</select>
alert($('select[name="test"]').val());
// outputs 1,2,3 when you select all three options
try
$("class of select ").change(function() {
alert($(this).val());
});