jQuery: Textbox value to Listbox

[cancer10]

Hello,

I have the following:
- textbox (txt_RegionName)
- button (btn_AddToList)
- listbox (lst_Regions)

I want to add text to listbox which I enter in the textbox on click of the button.


For example, If I enter "xyz" in the textbox >> [click button] >> Its should add in the listbox.

I am using the following code to do this but getting a diff result. The whole of the textbox is getting listed in the listbox. (pic attached)

<script>
			
			
	$(document).ready(function(){
	
	
		$("#btn_AddToList").click(function(){
		$('input[name=txt_RegionName]').appendTo("#lst_Regions");
		 });
			
			
	});
</script>

Plz tell me a solution.


Thanx

[rangana]

To insert new option on the listbox, use the Option() object of JS, I'm not aware of any jQuery counterpart on that. This might help:

$(document).ready(function(){
$("#btn_AddToList").click(function(){
	var opt=document.getElementById('lst_Regions');
	var inp=$('input[name=txt_RegionName]').val();
	opt.options[opt.options.length]=new Option(inp,inp);
	});			
});

[Spudhead]

Does this work?

<script>
			
			
	$(document).ready(function(){
	
		$("#btn_AddToList").click(function(){
		$('#lst_Regions').append('<option value=\"'+$('input[name=txt_RegionName]').val()+'\">'+$('input[name=txt_RegionName]').val()+'</option>');
		 });
			
			
	});
</script>

ETA: Aha. I'd use the solution posted above this

[cancer10]

Hi Spudhead,

Are you sure this is a proper way of doing? Because I googled and found a way from moving items from one list to another.

Here you go

$('select[name=List1] option:selected').appendTo('#List2');

Can u get a hint from the above code?

Thanx

[rangana]

It works, if it's like this:

<script type="text/javascript">	
$(document).ready(function(){
$("#btn_AddToList").click(function(){
	$('select[name=List1] option:selected').appendTo('#List2');
	});			
});
</script>
<select name="List1">
<option>---</option>
<option>Test1</option>
<option>Test2</option>
<option>Test3</option>
<option>Test4</option>
<option>Test5</option>
<option>Test6</option>
</select>
<input type="button" id="btn_AddToList" value="Add">
<select id="List2">
<option>---</option>
</select>

...but it seemed the appendTo method is'nt able to append the text from the textbox using jQuery's val() method:

<script type="text/javascript">	
$(document).ready(function(){
$("#btn_AddToList").click(function(){
	alert($('input[name=List1]').val()); // Let me know the textbox's value
	$('input[name=List1]').val().appendTo('#List2');
	});			
});
</script>
<input name="List1" type="text">
<input type="button" id="btn_AddToList" value="Add">
<select id="List2">
<option>---</option>
</select>

[cancer10]

Thanx so much rangana for posting.

Would you recommend your method of doing this or Spudhead's method?


Thanx

[rangana]

I would recommend mine, as it's easy to modify and maintain,

[cancer10]

ok, thanx so much for your help.

God bless

[cancer10]

Originally Posted by rangana

To insert new option on the listbox, use the Option() object of JS, I'm not aware of any jQuery counterpart on that. This might help:

$(document).ready(function(){
$("#btn_AddToList").click(function(){
	var opt=document.getElementById('lst_Regions');
	var inp=$('input[name=txt_RegionName]').val();
	opt.options[opt.options.length]=new Option(inp,inp);
	});			
});

While doing this, my firebug is showing the following error

opt is null
http://loopback/regions.php
Line 20

My line 20 is the following line:
opt.options[opt.options.length]=new Option(inp,inp);


When I

alert($('input[name=txt_RegionName]').val());

I can see the value in the alertbox.

Thanx

[rangana]

Could you show us your complete modification.