The current code, which will retrieve one selected option(there are 2 selected).
<select class="filter-selectpicker" multiple="multiple">
<option data-path="all?page=1&type=3,4,6" selected>Type 6</a>
<option data-path="all?page=1&type=3,4,7" selected>Type 7</a>
<option data-path="all?page=1&type=3,4,8">Type 8</a>
</select>
$('.filter-selectpicker').on('change', function(){
var location = $('.filter-selectpicker option:selected').data('path');
window.location.replace(location);
});
How can I access the specific <option> that the user clicked on and get the path attribute? Right now it will just find the first selected option.
My Goal is to redirect the user to a new URL when he clicks on <option>.
The selected is being added with PHP(checking the $_GET, if it's in the array -> echo selected to the <option>).
I'm using bootstrap-select, [https://silviomoreto.github.io/bootstrap-select/][1]
Hope I am clear. Thanks in advance!
--------Update--------
Instead of using echo "Selected" what I did is is data-icon="' . $path["selected"] . '" (if it's in the $_GET it will return icon code, in my case: glyphicon-ok).
Now, the issue is that the icon will be placed on the left side of the text, the solution is to edit the bootstrap-select.js
First add a class(myNewClass in this case):
icon = typeof $this.data('icon') !== 'undefined' ? '<span class="' + that.options.iconBase + ' ' + $this.data('icon') + ' myNewClass"></span> ' : '',
Next, change the order the text output:
This: text = icon + '<span class="text">' + text + subtext + '</span>';
To: text = '<span class="text">' + text + subtext + '</span>'+ icon;
And don't forget the CSS of your new class:
.myNewClass {
padding-left: 10px;
}
with multiple selections, you will want to loop each option selected
$('.filter-selectpicker').on('change', function(){
$(this).find("option:selected").each(function(){
var location = $(this).attr('path');
window.location.replace(location);
});
});
Related
I am creating dynamic select in script.
$.each(data, function (i) {
optionhtml = '<option value="'
data[i].CustomerId + '">' + data[i].CustomerId + ' _ ' + data[i].PurchaseDate + ' _ ' + data[i].SupplyDate + ' _ ' + data[i].SupplierName + '</option>';
$("select[id='ddlAdm" + arrElem[0]']").append(optionhtml);
});
This works well. Select displays text in dropdown for CustomerId+PurchaseDate+SupplyDate+SupplierName
However I want to add header in select for this.
CustomerId PurchaseDate SupplyDate SupplierName
123 10/11/2016 10/15/2018 XYZ
123 10/16/2018 10/23/2018 PQR
I really want to skip autocomplete and typeahead plugin for this. Need to add header in select.
You can add header to select element using optgroup
You can check demo jsfiddle.net/bharatsing/bgd9bobo/
<select>
<optgroup label = "CustomerId PurchaseDate SupplyDate SupplierName">
<option value ="123 10/11/2016 10/15/2018 XYZ">123 10/11/2016 10/15/2018 XYZ</option>
<option value ="123 10/16/2018 10/23/2018 PQR">123 10/16/2018 10/23/2018 PQR</option>
</optgroup>
</select>
I have created some select tags in javascript but now I want to customise the style with jQuery. The problem that I have is that I can't access the class of select tag. Does anyone have any idea why is this?
nextOneSelectorHtml =
'<select ' +
'class="dropdown" ' +
'id="dd" ' +
'data-selector-level="' + (currentSelectLevel+1) + '" ' +
'data-path="' + strPath + '" ' +
'onchange="onFsSelectChange(this)"' +
'><option disabled selected> -- select an option -- </option>';
....
Now if I am doing
$('dropdown').css( "background-color: #000000" );
there is no effect
You are missing a class selector . and change the format of argument passed in .css() method. First argument should be CSS property name and then next one should be its value:
$('.dropdown').css( "background-color", "#000000" ); //or .css({"background-color": "#000000"});
// ^^ Class selector needed
need some help for jquery.
How can i remove all dropdown option and replace new option?
Note : Only Name attribute used, No ID attribute used in select tag.
<tr id="payment_currency_tr">
<TD class="prompt">
Payment currency*
</TD>
<TD class="formdata">
<SELECT name="payment_currency" onchange="" style="" > <!-- to clear this option and replace to SGD option only.
<OPTION value="">
<OPTION VALUE="USD" >USD
<OPTION SELECTED SELECTED VALUE="CHF" >CHF
<OPTION VALUE="SGD" >SGD
</SELECT>
</TD>
</tr>
I try below script but not work
1)
msg = 'SGD';
js_option = '<option value="' + msg + '">' + msg + '</option>';
jQuery("#payment_currency_tr")
.find('option')
.remove()
.end()
.append(js_option)
.val(msg)
2)
msg = 'SGD';
Var d = document.getElementsByName('payment_currency')[0];
d.options[0].option = msg;
d.options[0].value = msg;
I know there is a way to change by using ID attibute but too bad i can't used it due to the table structure is generated via some cfm custom tag and unable to modify
document.getElementById("payment_currency").options.length = 0;
jQuery("#payment_currency").children().end().append(js_option);
Try this simply,
msg = 'SGD';
js_option = '<option value="' + msg + '">' + msg + '</option>';
$('select[name="payment_currency"]').html(js_option)//set new html,replace previous options
.val(msg); // sel msg as selected option
Live Demo
or you can try
jQuery("#payment_currency_tr").find('select')// find drop down
.html(js_option)
.val(msg);
Another Demo
Say I have a ListBox populated with a name value pair SelectList(myUsers, "Key", "Value"):
#Html.ListBox("ListReviewers", (SelectList)ViewBag.ListOFReviewers, new { style = "width:120px;" })
I want to double click an option in this ListBox, and place it in a SelectionList like below:
<div class="selectedEmployees">
<select class="selectionList" multiple="multiple" name="AssignedReviewer" style="width:120px;">
<!--x.UserID, x.FirstName + " " + x.LastName) -->
<option value=""></option>
</select>
</div>
Once this collection is placed in the above, I want to store all the values in another SelectionList Collection for later use.
Here is the start of my jQuery code:
<script type="text/javascript">
$('#ListReviewers').dblclick(function (i, selected) {
//double click on this value of listbox of type SelectList(myUsers, "Key", "Value")
//store this value and text
var value = $(this).val;
//var empName = $(this).data[0];
var empName = $(selected).text();
alert(empName);
//append an option element <option value=""></option>
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
I can get the value of the dblclicked collection object, but not the text of the collection object. Is there a better way to do this?
Try attaching your event to the option within the select itself. You can then use this to access it's properties.
$('#ListReviewers option').dblclick(function () {
var value = $(this).val();
var empName = $(this).text();
$('.selectionList').append('<option id="' + value + '">' + empName + '</option>');
});
Alternatively, you can use clone() and append() to move the option from one select to the other. This will save you having to worry about duplicate options being appended.
$('#ListReviewers option').dblclick(function () {
var $newOptions = $(this).clone(false);
$(this).remove();
$('.selectionList').append($newOption);
});
I'm doing a select box with a list of items(dynamically created from an XML created by a webservice), and I'm unable to pull the selected value correctly. Here is what is happening.
What I'm sending:
onchange="changeFunction(this.options[this.selectedIndex].value)"
What I'm receiving:
function (a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!=
I'm the only thing I'm using is some self built functions and jQuery.
Any help would be superb.
Edit: here is the change function. All it is intended to do is build a form populated with values for given selected item.
function changeFunction(selection) {
console.log(selection);
$('#right').empty();
var addNewFields = 'these will be the fields';
$('#right').append(addNewFields);
}
Here is the select in question:
<select class="userSelection" id="userSelection" size="10" style="width:150px;" onchange="changeFunction(this.options[this.selectedIndex].value)"></select>
This is literally all the code in the html part of it. It's being populated via ajax, and there are 2 divs, one for left, containing the select, and one for right, containing the content for the user.
Just for giggles, here is the code creating the options:
var optionTag = '<option value="' + $(this).find('optionID').text + '" >' + $(this).find('optionName').text() + '</option>';
$('#userSelection').append(optionTag);
var optionTag = '<option value="' + $(this).find('optionID').text + '" >' + $(this).find('optionName').text() + '</option>';
should be:
var optionTag = '<option value="' + $(this).find('optionID').text() + '" >' + $(this).find('optionName').text() + '</option>';
Notice that $(this).find('optionID').text should be $(this).find('optionID').text().
or even better, to avoid this soup:
var optionTag = $('<option/>', {
value: $(this).find('optionID').text(),
html: $(this).find('optionName').text()
});
When you set the event handler of a DOM object to a function it get passed an event object as it's argument.
selectBox.onchange = function(event) {
changeFn(this.options[this.selectedIndex].value);
};