I have a drop down menu. By default it allows only one option to select among all. I want to create a checkbox which when checked should change that dropdown menu to allow multiple options to be selected. How can I achieve this?
<select id="test" name="host">
<option value="host1">host1</option>
<option value="host2">host2</option>
.....
.....
</select>
I want this to be changed to following on checkbox being checked.
<select id="test" name="host" multiple="multiple">
<option value="host1">host1</option>
<option value="host2">host2</option>
.....
.....
</select>
You need to use javascript for that..use a library called 'JQuery', it makes it very simple..
Working Demo
$("#checkbox_id").change(function(){
if($(this).is(':checked'))
$("#test").attr('multiple', 'multiple');
});
Edit: for reverting back..
Working Demo
$("#checkbox_test").change(function(){
if($(this).is(':checked'))
$("#test").attr('multiple', 'multiple');
else
$("#test").removeAttr('multiple');
});
Related
I have a select with options. I want to disable the options based on ids. Some options have the same id. When i disable the options, it only disables just one id (the first option from the db).
How do I get the jquery to disable all options with id = 0
File.php
<select id="select_id" name="select_id">
<option id="<?php echo $item->part; ?>"><?php echo $item->part; ?></option>
</select>
<script>
$('#0').attr('disabled', 'disabled');
</script>
Applying the same id to multiple elements is not a good practice. I would recommend you use class in this case, instead of id. And then to disable all you would do :
$(".0").attr("disabled", "disabled");
Try this :
html :
<select id="select_id" name="select_id">
<option id="sel1">01</option>
<option id="sel2">02</option>
<option id="sel3">03</option>
<option id="sel1">04</option>
</select>
jquery :
let searchId = 'sel1'
$('#select_id option[id="'+searchId+'"]').attr('disabled', 'disabled')
jsfiddle :
https://jsfiddle.net/bmr1zsq9/
I think it's not a good way to have multiple ids with same values.
You should use name or value or class value to have a valid html
Hope this help
You can either use class attribute or custom attribute like data and you can call it using jQuery selectors.
<select id="select_id" name="select_id">
<option data-id="<?php echo $item->part; ?>"><?php echo $item->part; ?></option>
</select>
<script>
$('select option[data-id="0"]').attr('disabled', 'disabled');
</script>
I think you missed to add value attribute
The issue you are having is because you are using ID's, the DOM expects ID's to be unique thus will not operate recursively. Please update your code to utilize html classes and not ID's.
I.E.
<select id="select_id" name="select_id">
<option value="val1" class="sel1">01</option>
<option value="val2" class="sel2">02</option>
<option value="val3" class="sel3">03</option>
<option value="val4" class="sel1">04</option>
</select>
Also please make sure to set a value to your options for best practice.
I have generated drop-down box using loop. Now I want to get all value using J-Query for pass these value for insertion through Ajax.
My HTML CODE is:
<select name="travel[]" id="travel[]" >
<option value="1">Car</option>
<select>
<select name="travel[]" id="travel[]" >
<option value="2">Train</option>
<select>
<select name="travel[]" id="travel[]" >
<option value="3">Bus</option>
<select>
After click on Save button, how to collect all values of travel?
I don't understand why you define three <select> elements with an index-based name, each containing a single <option>. You do know that a <select> element is exactly that - it gives the user a selection?
With your current markup, the user doesn't get a choice about their selection - rather, travel[] will always be an array containing: 1,2,3.
You'd be better to modify your markup as follows:
<select name="travel" id="select_travel">
<option value="1">Car</option>
<option value="2">Train</option>
<option value="3">Bus</option>
<select>
Now you can easily access the value using:
$('#select_travel').val();
You can do this:
var data = $('select[name="travel[]"]').map(function () {
return $(this).val();
}).get();
console.log(data); // ["1", "2", "3"]
This will return you an array with the value for all the dropdowns.
Fiddle demo
why you are making name and id both as array type... i think one will enough if you really want to use array type.... then make id as unique for all...
<select name="travel[]" id="abc">
</select>
<select name="travel[]" id="def">
</select>
<select name="travel[]" id="xyz">
</select>
now you can access dropdown list easily..
$("#abc").val();
$("#def").val();
$("#xyz").val();
or else you can define uniq class for them if you really want array type id and name
<select name="travel[]" id="travel[]" class="abc">
</select>
<select name="travel[]" id="travel[]" class="xyz">
</select>
and try like this...
$(".abc").val();
$(".xyz").val();
hope it may help you
you should try js like-
var selectOption=$('#select_travel').val()
var Id=selectOption.getAttribute('id');
var name=selectOption.getgetAttribute('id');
now you can take output on button click
I'm trying to create a drop-down list with four options such that if I select the 4th option, I want a text box created so that I can get the value typed in that box using "$_GET"
Something like this;
<select name="value">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<!-- And a 4th one -->
</select>
And if the 4th one is selected, a box should appear like this;
<input type="text" name="firstname">
Edit;
My current code;
<script>
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='sortby']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "byDefindex"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "defindex"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
</script>
<form action="<?php $_PHP_SELF ?>" method="GET">
Select:
<br />
<select name="sortby">
<option value="playHours">Play Hours</option>
<option value="lastLogin">Last Login</option>
<option value="byDefindex">By Defindex</option>
</select>
<br />
<input type="submit" />
</form>
If your 4th option is this:
<option value="value4">Option 4</option>
You can use jQuery to display the field.
Put your field in a <div>
<div id="field"><input type="text" name="firstname"></div>
Now,
<script type="text/javascript">
$(document).ready(function(){
$('input[name="value"]').change(function(){
var v = $('input[name="value"]').val();
if(v=="value4") $('#field').show();
else $('#field').hide();
})
})
This is usually done via javascript; something like this (by using popular JavaScript library, jQuery) :
jQuery(function($){ //calling the code inside braces when document loads and passing jQuery object as '$' parameter;
$("select[name='value']").change(function(){ //binding an event that fires every time select value changes
var select = $(this); //caching select, which value was changed
if(select.val() === "value4"){ //checking if we selected the right option
$("<input>").attr({type: "text", name: "firstname"}).appendTo(select.parent()); //creating new input element object, setting its value to "value4" and appending to select parent element or wherever you want it
}
});
});
Hope that helps. You can find more here jQuery site
I'm not certain this is what you're asking, but it seems you're wanting to add new lines to your select list?
I often do something similar to this for adding new options to lists. The first option would be 'add a new record', like this:
<select name="value">
<option value="-1">Add New Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
Note that the value for "add new" is -1... you could put anything here, but it should be something that would never show up in the other options, so your javascript knows what to do when it is selected.
Add a 'onchange' to the select box like this:
<select name="value" onchange="if(this.value == -1) addOption(this);">
Note that if the selected option is -1, then a javascript function is called. It references itself (this), so that your function knows who called it.
Then create a function that allows adding a new option:
function addOption(theSelectElement){
// create a text box, underneath the select box:
var newInput=document.createElement('input');
newInput.type='text';
theSelectElement.parentNode.insertAfter(newInput,theSelectElement);
}
You'll want to add more code to this function so that the new text field has a name and perhaps an ID.
Hope this helps, or at least points you in the right direction.
I'm wanting to have a dropdown on my form, the options will be titles to content in my database, I want the content to show in a ckeditor when delected.
I'm looking to do something like the below with jquery and need a little help.
if 'dropdown' value is not 'please select'
CKeditor value equals php variable from database.
end statement
I'm fairly happy getting the variables in php so just need some jquery to change the ckeditor value dependant on the dropdown not being defaulted.
Hope this makes sense and thanks in advance for any responses.
html:
<select name="select" id="select">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>
jQuery dont forget to include the jquery file
$(document).ready(function(){
$('#select').change(function() {
var option = $(this).val();
$.get('select.php', {select:option}, function(data) {
$('#result').html(data).hide().fadeIn(1000);
});
});
});
your php file (select.php)
if(!empty($_GET['select'])) {
//call database and bring back the content for this selection and echo it
}
First you would need to populate the "option" elements of your select box using php, which I believe you said you are comfortable with.
Then, using jQuery:
$(document).ready(function(){
$('#myCKEditorTextArea').text($('#mySelectBox').val());
});
for pre-population on page load, or:
$('#mySelectBox').change(function(){
$('#myCKEditorTextArea').text($(this).val());
});
for population when the user changes the select box value.
Using smarty, take a look at the code below:
<select name="unitSelect" class="uniForm" id="unitSelect" style="width:1250px;" onchange="location.href='{$ABS_MANAGER_URL}/managerEditUnit.php?unit_id={$set[i].id}'; return false">
<option value="0" selected="selected">Select Unit</option>
{section name=i loop=$set}
<option value="{$set[i].id}" >{$set[i].unitName}</option>
{/section}
</select>
What I want, is for the value in the options to load into the select onchange"" call, for the GET variable... I can't figure out how to do this with javascript...any ideas anyone?
Thanks.
UPDATE
It wasn't easy, but between a few of your comments I got one working, thanks all:
<script type="text/javascript">
function viewUnit(value) {
var url = "managerEditUnit.php?unit_id=";
url += value;
document.location.href=url;
}
</script>
Here is an example:
<select onchange="alert(this.options[this.selectedIndex].value)">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
EDIT:
Sorry for the duplicate.
If you want to use it with a function:
function yourfunction(value) {
alert(value);
}
And ofcourse change alert in the above HTML to yourfunction.
You could get the value in the select object by doing this in the onchange event:
onchange="alert(this.options[this.selectedIndex]"
Since you can get that value, then you can dynamically build up your GET request. Some like this:
onchange="document.location.href='somepage.php?id=' this.options[this.selectedIndex];"
jQuery makes it even easier, you can just use:
onchange="alert($(this).val())"
This should do it:
<select onchange="yourfunction(this.options[this.selectedIndex].value);">
I could suggest you to use following for getting the value when select an option from dropdownlist -->
this.value
moving to your javascript means -->
onchange="JavaScript:userDefinedFunction(this.value);"
eg::
select name='state' onchange="JavaScript:userDefinedFunction(this.value);"