I am using plain javascript for changing option's text to something else on some event. After that Select(multiselect) element freezes.If I comment line 2 below,then Select element will not freeze.Any suggestions? I want to use javascript only.
function updateSelect(select)
{
var opt = select.options[select.selectedIndex];
opt.text = "-";//--2
..
..
}
I am able to do it with Jquery with .text() function.
$("#"+opt.id).text("-");
This would resolve the problem:
option.textContent = "-";
Related
I am trying to add few items to a list box from a text box using javascript. but the problem is as soon as I am adding the items, it gets visible in the list box for a second and then gets deleted. Any solution for this?
I am adding items from TextBox4 to ListBox1
function AddToList() {
// Create an Option object
var opt = document.createElement("option");
// Add an Option object to List Box
document.getElementById("ListBox1").options.add(opt);
opt.text = document.getElementById("TextBox4").value;
opt.value = document.getElementById("TextBox4").value;
document.getElementById("ListBox1").options.add(opt);
}
document.getElementById("ListBox1").options.add(opt); // remove this line
opt.text = document.getElementById("TextBox4").value;
opt.value = document.getElementById("TextBox4").value;
document.getElementById("ListBox1").options.add(opt);
As you're appending an <option> which has no value or text.
Got the solution, Need to add
return false;
at the end of the function.
I am using javascript to populate a select box in my page but its not working, the select box displays but its completely empty.
I also get no error in my console.
My script is this:
var select = document.createElement("select");
for(var i in resource){
if(i !== id && select.hasOwnProperty(i)){
select.setAttribute(i, resource[i].name);
}
}
d.appendChild(select);
Example data for resource:
{
"1":{"name":"Test"},
"2":{"name":"Test2"},
"3":{"name":"Test3"}
}
Any ideas on why it won't populate?
There are quite few mistakes in your script, many are mentioned in the comments as you can see.
What you are looking for might be something like this
var select = document.createElement("select");
for(var i in resource){
if(resource.hasOwnProperty(i)){ //removed the i !== id condition, you may put it back
var opt = new Option(resource[i].name, i);
select.options[select.options.length] = opt;
}
}
document.body.appendChild(select);
Demo: Fiddle
You need to create child elements of the select, that are option tags.
Here's a sample JSFiddle.
I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks
You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/
You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});
I'm trying to get the title of an option element, but it keeps returning undefined. This also happens for $(this).attr("name")…and $(this).attr("value"), but curiously $(this).val() works (as expected). Yet, I'm able to set the value with $(this).attr("value", "baz").
Fiddle: http://jsfiddle.net/jshado1/JgAJC/1/
this points to the <select> element. For the selected option, use:
this.options[this.selectedIndex]
Full code (you can safely unwrap $opt's jquery wrapper, and use $opt.title and $opt.name, these are safe across all browsers):
$('select').change(function() {
var $opt = $(this.options[this.selectedIndex]),
t = $opt.attr("title"),
n = $opt.attr("name"),
v = this.value;
$("#name").text("name: "+n);
$("#title").text("title: "+n);
$("#value").text("value: "+v);
});
Another method, the jQuery-way is:
$('select').change(function() {
var $opt = $(this).children(':selected'),
t = $opt.attr("title"),
n = $opt.attr("name"),
v = this.value;
$("#name").text("name: "+n);
$("#title").text("title: "+n);
$("#value").text("value: "+v);
});
This is because you have mistaken what this represents in your code. The this represents the select element that has changed. Because the select node doesnt have a title attribute, it is undefined. What you would need to do is enumerate over the options list of the select and find the item that is selected. Then, you can operate on that item to find information like so:
var element = $(this.options[this.selectedIndex]);
element.attr('title');
select.onchange = function() {
this.value;
}
It's easy to retrieve the value but now I need the text of the selected element. How to do it?
(Sorry... put .value before my edit instead of .text by accident 8-)...)
this.options[this.selectedIndex].text
//assuming "this" is the select element
if (this.selectedIndex >= 0) {
this.options[this.selectedIndex].text = "some text";
}