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.
Related
I want to comment off .cities whenever I select the value Singaporean however it should get visible If I choose any other nationality apart from singaporean. Is it possible in PHP ?
<div class="cities">New York</div>
<select id="emp_nationality" name='emp_nationality' class='form-control'>
<option value="Singaporean">Singaporean</option>
<option value="Albanian">Albanian</option>
<option value="Algerian">Algerian</option>
<option value="American">American</option>
</select>
I tried this but for some reason it is not working
<?php
if ($_POST['emp_nationality'] != 'Singaporean') {
echo '<div class="cities">New York</div>';
}
?>
ERROR: Undefined index: emp_nationality
You can use an onchange handler in js and hide / show the ".cities" div depending on the value chosen. Note I added a display:none to the .cities since your first option in the select list is Singaporean and the function requires a change to trigger it. Also I would normally separate the onclick as a separate handler - rather than mixing it into the HTML but for this example I did it this way. Does not require PHP which would need the option to be selected on page load and would not easily change the visibility of the div on a different choice. This functions to hide the div if the correct option is selected and show it on other option selections.
function hideDiv(option)
{
if(option=="Singaporean"){$('.cities').hide()}else{$('.cities').show()}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cities" style="display:none">New York</div>
<select id="emp_nationality" name='emp_nationality' class='form-control' onchange="hideDiv(this.value)">
<option value="Singaporean">Singaporean</option>
<option value="Albanian">Albanian</option>
<option value="Algerian">Algerian</option>
<option value="American">American</option>
</select>
<div class="cities" style="display:none">New York</div>
<select id="emp_nationality" name='emp_nationality' class='form-control' onchange="hideDiv(this.value)">
<option value="Singaporean">Singaporean</option>
<option value="Albanian">Albanian</option>
<option value="Algerian">Algerian</option>
<option value="American">American</option>
</select>
//js
function hideDiv(option)
{
if(option=="Singaporean"){$('.cities').hide()}else{$('.cities').show()}
}
If you like would to avoid the "Undefined index: emp_nationality" you need to make sure this variable exists before checking it's value. Use isset( ).
http://php.net/manual/en/function.isset.php
if (isset($_POST['emp_nationality']) && ($_POST['emp_nationality'] != 'Singaporean')) {
echo '<div class="cities">New York</div>';
}
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 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');
});
I am populating a Drop Down Box using the following code.
<select id="select_catalog">
<?php
$array_all_catalogs = $db->get_all_catalogs();
foreach($array_all_catalogs as $array_catalog){?>
<option value="<?= $array_catalog['catalog_key'] ?>"><?= array_catalog['catalog_name'] ?></option>
Now how can I get the selected option value using PHP (I have the code to get the selected item using Javascript and jQuery) because I want the selected value to perform a query in database.
Any help will be much appreciated. Thank you very much...
You need to set a name on the <select> tag like so:
<select name="select_catalog" id="select_catalog">
You can get it in php with this:
$_POST['select_catalog'];
Couldn't you just pass the a name attribute and wrap it in a form?
<form id="form" action="do_stuff.php" method="post">
<select id="select_catalog" name="select_catalog_query">
<?php <<<INSERT THE SELECT OPTION LOOP>>> ?>
</select>
</form>
And then look for $_POST['select_catalog_query'] ?
You have to give a name attribute on your <select /> element, and then use it from the $_POST or $_GET (depending on how you transmit data) arrays in PHP. Be sure to sanitize user input, though.
Posting it from my project.
<select name="parent" id="parent"><option value="0">None</option>
<?php
$select="select=selected";
$allparent=mysql_query("select * from tbl_page_content where parent='0'");
while($parent=mysql_fetch_array($allparent))
{?>
<option value="<?= $parent['id']; ?>" <?php if( $pageDetail['parent']==$parent['id'] ) { echo($select); }?>><?= $parent['name']; ?></option>
<?php
}
?></select>
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);"