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.
Related
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?
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>
Let say I have this variable html which contain these select options:
var html = '<select>'+
'<option value="10">10</option>'+
'<option value="20">20</option>'+
'</select>';
How can I programmatically select an option which is inside the html variable so when I append them to somewhere, for example
$(this).children('div').append(html);
it will become like this:
<div> <!-- children div of the current scope -->
<select>
<option value="10" selected>10</option>
<option value="20">20</option>
</select>
</div>
How is it possible?
edit: the variable contents is generated from remote locations, and I must change the value locally before it is being appended into a div. Hence, the question.
edit 2: sorry for the confusion, question has been updated with my real situation.
You can cast the HTML into a jQuery element and select the value at index 0. Then you can add it to the DOM.
Here is a simple jQuery plugin to select an option by index.
(function($) {
$.fn.selectOptionByIndex = function(index) {
this.find('option:eq(' + index + ')').prop('selected', true);
return this;
};
$.fn.selectOptionByValue = function(value) {
return this.val(value);
};
$.fn.selectOptionByText = function(text) {
this.find('option').each(function() {
$(this).attr('selected', $(this).text() == text);
});
return this;
};
})(jQuery);
var $html = $([
'<select>',
'<option value="10">10</option>',
'<option value="20">20</option>',
'</select>'
].join(''));
$('#select-handle').append($html.selectOptionByIndex(0));
// or
$html.selectOptionByValue(10);
// or
$html.selectOptionByText('10');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-handle"></div>
By default, the first option will be selected - if you want to do on any other set it so using the index as soon as the select is appended:
$('#select_handle option:eq(1)').prop('selected', true)
(this selects the second option)
See demo below:
var html = '<select>'+
'<option value="10">10</option>'+
'<option value="20">20</option>'+
'</select>';
$('#select_handle').append(html);
$('#select_handle option:eq(1)').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select_handle"></div>
You could try simply setting the value of the drop-down to the one you wish to 'select' - like
$("#select_handle select").val( a_value );
For example, if a_value is 30 it will add the needed HTML to the DOM node. This would be my take:
$(function() {
var html = '<select>' +
'<option value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'<option value="50">50</option>' +
'</select>';
// set a value; must match a 'value' from the select or it will be ignored
var a_value = 30;
// append select HTML
$('#select_handle').append(html);
// set a value; must match a 'value' from the select or it will be ignored
$("#select_handle select").val(a_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>select added below</h2>
<div id="select_handle">
</div>
selected="selected" will work
var html = '<select>'+
'<option value="10">10</option>'+
'<option value="20" selected="selected">20</option>'+
'</select>';
$('#select_handle').append(html);
You can do this in jQuery using the .attr() function and nth pseudo-selector.
Like so:
$("option:nth-child(1)").attr("selected", "");
Hope it helps! :-)
after the append, try $('#select_handle select').val("10"); or 20 or whatever value you want to select
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
I am designing a dynamic HTML for Select Option like below:
item += "<td class='ddl' style='width:40%;'>";
item += "<select>"
item += " <option id='list' name='selector' value=" + select + ">" + select + "</option>";
for (var l = 0; l < array.length; l++) {
item += " <option class='ddl' value=" + array[l] + ">" + array[l] + "</option>";
}
item += "</select>";
if ("One"!= '') {
$('#list').val("One");
}
item += "</td>";
The above code creates a dynamic HTML like below:
<select disabled="">
<option select="" value="Please" name="selector" id="list">Please Select</option>
<option value="One" class="ddl">One</option>
<option value="Two" class="ddl">Two</option>
</select>
I want to set the value of the Select to "One" dynamically.
NOTE: The code is not inside document.ready, as I cant keep the code inside ready().
Might be I am assigning the value to the Select before it is revdered on the page. Please suggest me.
You need to call the javaScript to select the value after the dropdown(select) is added to the page. For example if the html is
<div id="myContainer" />
Then the javascript should be like
var item = "";
//Insert your code to create item
item +="<select id='mySelect'>";
item +='<option select="" value="Please" name="selector" id="list">Please Select</option>';
item +='<option value="One" class="ddl">One</option> ';
item +='<option value="Two" class="ddl">Two</option>';
item +='</select>';
$('#myContainer').append(item); //Add to html
//Now the id "mySelect" is available
$('#mySelect').val('One')
I've added a jsFiddle to demonstrate this at http://jsfiddle.net/taleebanwar/n9vCb/
You could also set a selected attribute on the corresponding option tag as you create the select dynamically.
If you are using jQuery then why don't you utilize the library for creating the select, for example, using something like this (Example):
var numbers = ['one', 'two', 'three', 'four', 'five'];
var select = $('<select/>', {id:'list', name:'selector'});
$.each(numbers, function(key, value) {
var text = value[0].toUpperCase() + value.substr(1);
var option = $("<option/>", { class:'ddl', value: value, text: text });
select.append(option);
});
select.val('two').appendTo('body');
I've appended the select into body but you may append it into a td and you can achieve it, give it a try, create the td same way and insert the select in the td and then insert the td in the table. Also you may check this answer.