Develop Reference

adding none option in html dropdown menu

I need to make "none" option as default before select an option from dropdown. My code is given below.
<select name="SelectFlow" id="Flow"> </select>
<script>
var select = '';
for (i=0;i<=100;i++){
select += '<option val=' + i + '>' + i + '</option>';
}
$('#Flow').html(select);
</script>

Add one line into your javascript code:
<select name="SelectFlow" id="Flow"> </select>
<script>
var select = '<option selected="selected">None</option>';
for (i=0;i<=100;i++){
select += '<option val=' + i + '>' + i + '</option>';
}
$('#Flow').html(select);
</script>
See: How can I set the default value for an HTML <select> element?

Access a specific attr on multiple select with a few selected options

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);
});
});

create a select dropdown option with values and text according to the specified data attribute

so below is my snippet. What I want is to create a select dropdown option base from the data attribute (data-select-text and data-select-values) of the currently clicked button, so below is a working snippet except for getting the data-select-values which is the problem because i dont know how to loop it along with the data-select-text so that the result of each select option will have values and text base from the split values of the data-select-text and data-select-values attribute, any ideas, help, suggestions, recommendations?
NOTE: currently, I could only able to use the attribute data-select-text as a select options values and text.
$(document).ready(function(){
$(document).on("click", "button", function(){
if($(this).attr("data-input-type").toLowerCase() === "select"){
var classList = $(this).attr('data-select-text').split(/\s+/);
var field = '<select>';
$.each(classList, function(index, item) {
field += '<option value="' + item.replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>

You could create an array for the values, the same as so did for the text.
Make sure that the order in both data-select-text and data-select-values is the same. Then you can use the index in your $.each loop:
$(document).ready(function(){
$(document).on("click", "button", function(){
var elem = $(this);
if( elem.attr("data-input-type").toLowerCase() === "select" ){
var classList = elem.data('select-text').split(/\s+/),
valueList = elem.data('select-values').split(/\s+/),
field = '<select>';
$.each(classList, function(index, item) {
field += '<option value="' + valueList[index].replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>
The result will be:
<select>
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>

Here is one way to do it, if I understand correctly. This code does not take into account different text or value lengths. It expects that the text length of options created is always equal to the values length being used.
$(document).ready(function () {
$(document).on("click", "button", function () {
if ($(this).attr("data-input-type").toLowerCase() === "select") {
var classList = $(this).attr('data-select-text').split(/\s+/);
var valueList = $(this).attr('data-select-values').split(' ');
var field = '<select>';
$.each(classList, function (index, item) {
field += '<option value="' + valueList[index] + '">' + item.replace(/%/g, ' ') + '</option>';
});
field += '</select>';
}
$("body").append(field);
})
});
Fiddle: http://jsfiddle.net/32qt0vn8/

jQuery: xml: How to change xml code via jQuery and id

I'm trying to change content in an XML by using jQuery.
From the examples that I've been looking up I think the code should be something like this:
javascript:
get_verrichtingen: function(){
var self = this;
var optie = "hello";
self.$( "#verrichting-select" ).html( '<option value="' + optie + '">' + optie + '</option>' );
},
XML:
<div id="cashier-frame">
<t t-esc="widget.get_verrichtingen()">
<select>id="verrichting-select"</select>
</t>
</div>
My goal is to create a dropdown menu later.
I think the reason this doesn't work might have to do something with where I've put the id="verrichting-select".
But I THINK it should be there because <select><option value="Hallo">Hallo</option></select> actually works?
Right now with the jQuery, the dropdown is just empty.
What am I doing wrong here?
edit: FYI: I'm trying to do this in Odoo Point of Sale.
edit for Emipro Technologies Pvt:
I can only see "All" in the dropdown but can't click it to see other values.
I've tried to make a very simple dropdown, but this doesn't work either. I only see "Volvo" with the code below:
<div id="cashier-frame">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
I can't click the arrow.
Could this have something to do with Odoo?

You need to do this in few steps,
First you need to define dropdown in xml,
<select id="sele_filter" name="sele_filter">
<option value="All" selected="true">All</option>
</select>
Then in your widget code you need to build options first and then append it to the dropdown.
var options = "";
var i=0;
options += '<option value="' + i++ + '">' + i + </option>';
options += '<option value="' + i++ + '">' + i + </option>';
options += '<option value="' + i++ + '">' + i + </option>';
this.$el.find('#sele_filter').append(options);
$el will accessible through out Point of Sale.

How to remove all dropdown option and replace new option by only NAME attibute given?

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