将javascript填充的下拉列表中的所选项目添加到文本框

Question

Hi I have a drop down whose items are populated by javascript and has no option tags. When the page loads, the drop down is loaded with all the options by an external JavaScript file. When the user selects an item from this drop down i would like this selected item to update a text box (which is on the same page) with their selection so I can then send this by email.

I can get it to work on a normal drop down with actual options tags that isn't populated by javascript, but can't get it to work with my Populated drop down. I have read on various posts that drop down items populated with JavaScript wont be read by the server because it is all done client side, and that a work around involves adding the populated drop down selection to a hidden field, but I cant find a method for doing so. I am also working with classic ASP to send the form

Hope someone can help,

Hi I forgot to mention that the drop down inst populated by inline JavaScript but rather from an external JS file

hi some code i have used, works fine for a normal drop down, but not my one that is populated with JS

function ChooseContact(data) {

document.getElementById ("friendName").value = data.value;

}


<select onchange="ChooseContact(this)"><option value='1'>1</option><option  value='2'>2</option></select>

Thanks R

HI - its all done using this external script http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

HI Here is a snippit of the exteranl JS file populating the drop down

/var hide_empty_list=true; //uncomment this line to hide empty selection lists

var disable_empty_list=true; //uncomment this line to disable empty selection lists

var onclickaction="alert" //set to "alert" or "goto". Former is for debugging purposes, to tell you the value of the final selected list that will be used as the destination URL. Set to "goto" when below configuration is all set up as desired.

var newwindow=0 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");

addOption("First-Select", "Select a course type", "", 1); //HEADER OPTION
addList("First-Select", "New Staff", "", "NewStaff");
addList("First-Select", "All Staff", "", "AllStaff");
addList("First-Select", "Learning, Teaching, Research and Knowledge Exchange", "",   "Learning");

addList("First-Select", "Leaders and Managers", "", "Leaders");

Answer 1

With your posted code, it should be perfectly possible to achieve what you are trying to do. I've constructed an example that expands on your code to show you how the input field can be updated.

See this jsFiddle

And also one that shows you it should still work if all of the options are generated via JavaScript. So maybe the issue you are having is elsewhere?

<select id="selecty" onchange="ChooseContact(this)"></select>
<input type="text" id="friendName" />

<script>
    var opt = document.createElement("option");
    opt.text = "One";
    opt.value = "1";
    document.getElementById("selecty").add(opt,null);

    opt = document.createElement("option");
    opt.text = "Two";
    opt.value = "2";
    document.getElementById("selecty").add(opt,null);

    opt = document.createElement("option");
    opt.text = "Three";
    opt.value = "3";
    document.getElementById("selecty").add(opt,null);

    function ChooseContact(data) {
        document.getElementById("friendName").value = data[data.selectedIndex].value;
    }
</script>

See this jsFiddle