I need to update an option text and I do not have #id of the select box.
I found examples like this:
$('#selectid option:contains("OLD_TEXT_VALUE")').text('newtext');
I can't use this example, since I can only access select like this:
selectedField.find('select')
how do I add
option:contains("OLD_TEXT_VALUE")').text('newtext');
to the above way of selecting select, is it possible?
This is my code, there can be many selects dynamically inserted into the page in this format.
<div id="basic_select_xxxx" class="form-group selectable">
<select class="form-control">
<option>Select something</option>
</select>
</div>
I can select the select only like this:
$('#basic_select_xxxx').find('select).
how to then update select option with new text by looking up the old value? Is it possible this way? I can not put id on select, so let me know if there is other way?
You can chain your jQuery Do something like:
$('#basic_select_xxxx').find('select option:contains("OLD_TEXT_VALUE")').text('newtext');
Assuming all the containers ID's start with same "basic_select_" prefix you can use that in an "attribute starts with" selector
$('.selectable[id^="basic_select_"] select option:contains("OLD_TEXT_VALUE")').text('newtext');
Related
I have a select control getting values dynamically.
In the script, I need to insert the following text inside the select tags as its inner html.
<option value=""></option>
<option><h1>zoot</h1></option>
<option><div>divTest</div></option>
<option><span> style="color:red;font-weight:bold;">SpanTest</span></option>
<option><option>option</optipon></option>
What I am trying to do is in the picture below
I tried using HTMLEncode and that was not working too. Am I able to do this using JavaScript or jQuery or by any other means in html select control ?
You can add the items to the select using jQuery and the text function.
e.g.
var vals = ["<h1>zoot</h1>",
"<div>divTest</div>",
"<span> style='color:red;font-weight:bold;'>SpanTest</span>",
"",
"option"
];
var $stuff = $("#stuff");
vals.forEach(function(val) {
$("<option/>").text(val).appendTo($stuff);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="stuff">
<option value=""></option>
</select>
It you want the HTML to be user-visible, you need to encode it. Working example below.
<select name="example">
<option value=""></option>
<option><h1>zoot</h1></option>
<option><div>divTest</div></option>
<option><span> style="color:red;font-weight:bold;">SpanTest</span></option>
<option><option>option</optipon></option>
</select>
If you are trying to show previews using those HTML blocks, you may wish to drop out of select lists and provide a different user interface to do so - such as previews combined with radio inputs.
I'm just starting with Angular JS and i find it very handy in terms of data handling.
My question, is it possible to bind a custom attribute by html alone? Specifically with the select element.
Instead of getting the value attribute, i want to get a custom attribute from the option tags under select element.
Just to be clear, instead of displaying the "value" of the input element, i want to display what's inside the data-custom1 which is the word "payment".
Example would be:
<select ng-model="colors">
<option data-color-hex="#2ba2ba" value="1"> Color A<option>
<option data-color-hex="#222222" value="2"> Color B<option>
<option data-color-hex="#cacaca" value="3"> Color X <option>
</select>
<p>{{display the data-color-hex value here}} </p>
If i select an option from the select element, the data-color-hex is displayed
in the element instead of value 1,2,3.
You first need to set a name for your select:
<select name="colors" ng-model="$ctrl.colors">
<option value="1" data-custom1="paymentA">1</option>
<option value="2" data-custom1="paymentB">2</option>
<option value="3" data-custom1="paymentC">3</option>
</select>
Then, you can create a method in your ctrl which returns the data-custom1 attribute from the selected option:
$ctrl.getDataCustomFromSelect = function(selectName) {
return document.querySelector('select[name="' + selectName + '"] option:checked')
.getAttribute('data-custom1');
}
You can get that in your template doing:
<p ng-bind="$ctrl.getDataCustomFromSelect('colors')"><p>
Fiddle with that solution: https://jsfiddle.net/virgilioafonsojr/b002ccja/
I hope I understood your problem correctly and it solves the issue.
Two ways to do this, and you'll probably want to use the first:
<input ng-model="amount" data-custom1="{{payment}}">
<p>{{payment}}<p>
Or by using ngAttr:
<input ng-model="amount" ng-attr-payment="{{payment}}">
<p>{{payment}}<p>
The latter one is used for picky DOM APIs like the SVG DOM API. You can read more here: https://docs.angularjs.org/guide/interpolation
If you want get the input value, you have to use ng-model, only this.
And then, in your controller.js, get the input value from ng-model.
(I don't know if that's what you want to know)
Here is the code
<form method="get" name="form_delivery">
Please select country for delivery<br>
<select name="deliverymethod">
<option value="0" selected="selected">Select country / region</option>
<option value="1">UK (incl. Northern Ireland)</option>
<option value="8">Australia</option>
<option value="9">New Zealand</option>
</select>
</form>
I need to identify the text "Please select country for delivery" and wrap it around the container like a "span" and replace the wrapped text
<form method="get" name="form_delivery">
<span>Please select country for delivery</span><br>
This code is generated by an automated server, I only have access to HTML Template hence Jquery is the only option for making modifications on the fly.
Any Idea's?
Two solutions here :
1 : If you don't have any binding on other elements of the form, you may simply do a replace of the HTML :
$('form').html(function(_,h){
var t = "Please select country for delivery";
return h.replace(t, '<span>'+t+'</span>');
});
2 : If you have bindings, you can't do that as it would delete all elements, you need to do it cleanly, not modifying other elements. You may use a library for that like my own groumf :
Groumf.replaceTextWithHTMLInHTML(document.body, t, function(s){
return '<span>'+t+'</span>'
});
If you know that the text is the first part of the form, you can use $($('form').get(0).childNodes[0]).wrap('<span>');.
You can use contents() to get the text nodes as well as the HTML elements using jQuery. You can then filter out the text nodes, using .filter() (which might be unnecessary, depending on your potential markup) and then get what I'm assuming will always be the first text node, using .eq().
From there we can wrap this text node in a <span> using .wrap(), traverse to this new <span>, and prepend it to our form:
var $form = $('form[name=form_delivery]')
$form.contents().filter(function(){
return this.nodeType == 3;
}).eq(0).wrapAll('<span></span>').closest('span').prependTo($form);
JSFiddle
If I ve dropdown of
<select id="city">
<option value="blore">Bangalore</option>
<option value="delhi">Delhi</option>
<option value="che">Chennai</option>
<option value="jaipur">Jaipur</option>
<option value="hyd">Hyderabad</option>
<option value="mum">Mumbai</option>
<option value="pune">Pune</option>
</select>
then the value of dropdown selected can be extracted using :
document.getElementById('city').value
But since we cant style the select-option dropdown, I was wondering is there any way where I define a list type dropdown and can extract the value user selects in javascript.
Something like.
(Dropdown using lists)
<ul id="city">
<li value="something1">Something1</li>
<li value="something2">Something2</li>
<li value="something3">Something3</li>
</ul>
and document.getElementById('city').value
Kindly correct me if m wrong or is there any other way to define a styled dropdown menu whose value can be extracted in javascript for processing.
If more code is required kindly put it in comment.
Thanks in advance :)
Since you're basically looking to mimic the functionality of a form element without using one, it's going to take a little extra work in javascript. jQuery will greatly simplify this, so I'll use it for this example. Common practice these days when wanting to attach arbitrary data to an html element is to use an attribute prefixed with "data-". You'll see why in a second.
So, for your example, you could use the markup:
<ul id="city" data-value="">
<li data-value="something1">Something1</li>
<li data-value="something2">Something2</li>
<li data-value="something3">Something3</li>
</ul>
Style your list however you like, including js to create the "dropdown" effect, etc. I'd suggest looking into bootstrap's dropdown component if you'd like to save more time.
Finally, you'll need to create the javascript to select a value, and put that value as the 'selected' one in your parent element:
$('#city li').click(function() {
$(this).parent().data('value', $(this).data('value'));
});
This is making use of jQuery's .data() method as a shortcut for setting and getting data- attributes.
You can now access the currently-selected value by calling:
$('#city').data('value');
Without jQuery, there is more involved. I'll leave it up to you whether you think it's useful to pursue a vanilla js solution.
What I'm trying to do is give my textfield a value based an an option is select form my drop down. For example: I have 2 fields, a drop down and a textfield. I select Facebook from the dropdown and the value "http://www.facebook.com/" appears in my textfield. How can I achieve this effect? I know that I have to call a function onchange of the drop down but that's pretty much everything I know. Remember that I'm not trying to copy the exact selected value from the dropdown to the textfield here.
example markup
<select>
<option value="http://www.facebook.com">Facebook</option>
<option value="http://www.twitter.com">Twitter</option>
</select>
<input type="text" />
jquery
$('select').change(function() {
$('input[type="text"]').val(this.value);
});
Here's a fiddle
In response to your comment, there are a number of ways to do it (a switch statement, if/elseif statement etc), the easiest would probably be to create an object mapping the text to the corresponding url:
var urlFromText = {
'Facebook' : 'http://www.facebook.com/',
'Twitter' : 'http://www.twitter.com/'
};
Then, in your change handler, you can simply use:
$('input[type="text"]').val(urlFromText[$('option:selected', this).text()]);
Here's an example
HTML
<select id="network">
<option value="http://www.facebook.com">Facebook</div>
<option value="http://www.twitter.com">Twitter</div>
</select>
<input id="network-txt"/>
Jquery
$("#network").change(function(){
$("#network-txt").val($(this).val());
});
Working Example http://jsfiddle.net/nVEEE/