I've built a dynamically populated multiselect form for my site. When the user selects one or more items in the first select, the second is filled via jQuery.
The form works correctly except for the order the multiselect is filled.
e.g. The "product" select contains:
<select name="product_id" id="products" multiple="multiple">
<option value="#" selected="selected">Please Select</option>
<option value="1">Product 1</option>
<option value="5">Product 2</option>
<option value="4">Product 3</option>
<option value="6">Product 4</option>
(Yes, the values are not the same as the product numbers)
When a user selects one of these the jQuery call populates the next dropdown.
<select name="version_id" id="versions" multiple="multiple">
<option value="100">3.0.7</option>
<option value="101">1.0.8</option>
<option value="102">12.0.1</option>
The code fills this select and orders by "value", is there a way to force it to order by the actual content e.g. change it to:
<option value="101">1.0.8</option>
<option value="100">3.0.7</option>
<option value="102">12.0.1</option>
The success code in my call is:
success: function(versions)
{
$.each(versions,function(id,version)
{
var opt = $('<option />');
opt.val(id);
opt.text(version);
$('#versions').append(opt);
});
}
Thanks!
Thanks to #deifwud for pointing me in the right direction. In the end I added the following directly after my success function. It re-orders the results sorting by the text instead of the value.
$("#versions").html($("#versions option").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));
you must be doing a ajax call to a file where a sql query is executed to dynamically generate the next dropdown box.... if this is the case then you need to place the keyword "ASC" at the last of select query which is yielding your "id" in value attribute of <option value"">
Related
Greeting fellow code-jugglers!
I am dealing with a kinda frustrating problem, which it seems I can't solve to 100% I want it to work.
I've got a select field with various dynamic options amount (could be more than one "middle", e. g. "middle 1", "middle 2") deactivated and fetched and build by php. The user has to input a number to activate and pre-select the specific select option. So far it works to the point, it pre-selects the option based on the user input. But I want it to enable every select option above the pre-selection.
$(document).ready(function() {
// PRE-SELECT TPOS BASED ON TMEMBER
$('#inputX').change(function() {
var member_id = $('#inputX').val();
// FETCHED BY PHP, NO NEED TO OVERRIDE (WORKS)
var event_id = <? echo $event_id; ?>;
var posit_id = <? echo $posit_id; ?>;
// FETCH CURRENT POSITION, MEMBER IS AT
$.ajax({
type: 'POST',
url: 'fetch_pos.php',
data: {
posit_id: posit_id,
event_id: event_id,
member_id: member_id
},
// GET SELECT OPTION WITH POSITION VALUE MEMBER IS AT [E. G. "START"]
success: function(html){
// ENABLE SELECT OPTION
$("#selectX option[value='" + html + "']").attr("disabled", false);
// ADD SELECTED ATTRIBUTE
$("#selectX").val(html).setAttribute("selected", "selected");
// DISABLE EVERY OPTION PAST THE RETURNED VALUE AND
// ENABLE EVERY "PREVIOUS" OPTION
$('select#selectX').val(html).children().attr("disabled", false).filter(':selected').nextAll().prop('disabled', true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="inputX" id="inputX" required="required" />
<select name="selectX" id="selectX" required="required">
<option selected="selected">Awaiting Input</option>
<option disabled="disabled" value="Start">Start</option>
<option disabled="disabled" value="Middle">Middle</option>
<option disabled="disabled" value="Last">Last</option>
</select>
</form>
The returned value of AJAX is one of the option values, since my code needs them to be worked with and not integers as 1, 2 or 3(+).
For example:
I've got the same select field but the member with id number 3 is at position goal. So "goal", "middle", and "start" should be enabled. If member number 3 is at position middle, I want only "start" and "middle" to be enabled.
Any help?
Sincerely,
montreal
EDIT
Because of misunderstanding: ignore the AJAX. It just returns the value as position of the member, because the option value is defined as such --> E. G. Member with ID 1 is at position "middle", hence option value="middle" and everything before (option value="start") should be enabled.
I just want to enable every option based on the selectIndex from the returned value selected option minus total amount of options.
Example:
3 options
returned value is "middle", hence selectIndex 1
select option with selectIndex 0 and 1 should be enabled
I think you are looking for something like:
$('select#test')
//set new value on select
.val('4')
// enable all children
.children().prop('disabled', false)
// starting at selected option, disable all after it
.filter(':selected').nextAll().prop('disabled', true)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" size="10">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
<option value="10">item 10</option>
</select>
Basically, I have two dropdown lists on my page, both query the same database to populate themselves. What I want is for a use to be able to select an item in one of the dropdown lists, and then for the second dropdown list to show every other option except for what the user selected in the first dropdown list.
I don't want the page to be refreshed in the process, and I want to avoid Sessions/Cookies if possible.
The easiest way I can think to do this is by setting a variable when the user selects a thing in one of the lists, but I can't for the life of me figure out how to do this.
HTML sample
<select id="select1" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="select2" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Javascript
$("#select1").change(function() {
var val = $(this).val();
$('#select2').children('option[value="' + val + '"]').attr('disabled', true);
// or
$('#select2').children('option[value="' + val + '"]').remove();
})
JSFIddle sample
I am new to web development, need help with PHP coding for a form.
A form with 5 dropdown list needs to be created. The values in 1st dropdown list would be "A,B,C,D,E,F,G". If suppose "C" is selected in 1st dropdown, then 2nd dropdown will have all the values except "C" i.e; "A,B,D,E,F,G". If suppose we select "A" in second dropdown, the values shown in 3rd dropdown would be all the values except the value chosen in dropdown 1 & 2. So value in dropdown 3 would be "B,D,E,F,G.
Similarly, it will happen for other two dropdown boxes.
One way you could try is to keep track of what options need to be removed in an array. Then you could define which select controls which. Take this example:
given this html
<select id="a" var="b">
<option>-- SELECT --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<select id="b" var="c" disabled>
<option>-- SELECT --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
<select id="c" disabled>
<option>-- SELECT --</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
you could use this jquery
var doNotShow = [];
$('select').change( function() {
var nextSelect = $(this).attr("var");
doNotShow.push($(this).val());
$.each(doNotShow, function( index, value ) {
$("#" + nextSelect + " option[value='" + value + "']").prop('disabled', true);
});
$("#" + nextSelect).prop('disabled', false);
$(this).prop('disabled', true);
});
doNotShow.push($(this).val()); keeps track of all the previously selected values, then the $.each removes (or in this case, disables) the unwanted options from the next select in line, which is stored in the select's var property.
Here's an example.
This will be done with jquery or even with Javasript, with jQuery you can read the documentation of .change() function, and for Javascript with the onchange Attribute, try to read this question it will help you a little bit : HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed
i have a select list menu that i use in my email form:
<select name="orgSelect" class="orgSelect">
<option value="0">----Select product----</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
</select>
But when the email form is sent its posts the value and I don't want him to get the value, but yes the item label in front "Product 1"..., the Value of the options is using ofr another thing, can someone tell me how to get the data "Product 1" or Product 2...
Either don't use the value= attribute at all, which will have the client send the name of the option instead (but you don't get the actual number (guessing this is ID) of the product).
Or, a better solution, query your database for the product ID before sending the email, and get the Product name from there.
you set like this
<select name="orgSelect" class="orgSelect">
<option value="0-0">----Select product----</option>
<option value="1|Product 1">Product 1</option>
<option value="2|Product 2">Product 2</option>
<option value="3|Product 3">Product 3</option>
</select>
and get post value like this
var arr=explode('|',$_post['orgSelect']);
var arrval=arr[0];
var arrname=arr[1]
i want to know that how to get multiple selectbox values in php
means that i have more than 1 select box on a page and it can be increased when user click on addmeans that a page can contain numerous selectboxes now plz tell me how to get the values from that boxes and also how do i get know that how many select boxes were used by user
i think an array should be used but i dont know how??
<select name="select" id="select">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value2</option>
</select>
<select name="select" id="select">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value2</option>
</select>
<select name="select" id="select">
<option value="1">value1</option>
<option value="2">value2</option>
<option value="3">value3</option>
</select>
like in above example
how do i get know that how many selectboxes were used and how to get value of each box
code for adding the new dropdown
function addRow()
{
var newRow = document.all("tblGrid").insertRow();
var oCell = newRow.insertCell();
oCell.innerHTML = "<select name='select' id='select'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>";
First of all you need to use unique id and name for each select box. Otherwise it is difficult to manage them after post.
So you can do it something like this:
<select name="myselect[]" id="select1">
<select name="myselect[]" id="select2">
<select name="myselect[]" id="select3">
After form post you can get all select box values:
print_r( $_POST['myselect'] );
For number of select boxes on page you can try:
echo count( $_POST['myselect'] );
Change the name attribute value in each tag to something unique like 'select1','select2','select3' . To refer these values in PHP use $_POST['select1'] and so on. OR use $_GET['select1'] incase of get method is used in the form.