如何获取从列表中选择的值

时间:2014-02-04 06:20:02

标签: javascript html

我创建了html页面,其中有一个显示“汽车名称”的列表。 我需要获取从列表中选择的值并发布发送“选定值”参数的请求。

我可以用按钮

来做
<button onclick = "postreq('/../..path',{param_name= "fjskhfs"},func_to_handleonclick);">
</button>

任何人都可以指导我用选择选项做同样的事吗???
这将有很大的帮助...... 谢谢......

1 个答案:

答案 0 :(得分:2)

您可以使用以下代码模板;

<强> HTML:

<select id="cars">
    <option value="car1">Car1</option>
    <option value="car2">Car2</option>
    <option value="car3">Car3</option>
    <option value="car4">Car4</option>
</select>

<input type="button" name="send_cars" value="Send" id="send_cars"/>

<强> JQuery的:

$(document).ready(function() {
    $("#send_cars").click(function() {
        alert("Car: " + $("#cars :selected").val() + " will be sent as request param");
        $.ajax({
            url: "your_url",
            data: "car=" + $("#cars :selected").val(),
            method: "POST",
            success: function() {

            }
        })
    });
})

您可以在此处看到工作小提琴: http://jsfiddle.net/cubuzoa/Y5vKs/1/

如果要使用纯js,可以使用以下代码结构;

<强> JS:

function postreq(url, param_value, callback) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("param_name=" + car_id);
}

function func_to_handleonclick(result) {
    alert("Result is: " + result);
}

function getSelectedCar() {
    var e = document.getElementById("car_selectbox_id");
    var car_value = e.options[e.selectedIndex].value;
    return car_value
}

用法:

postreq("your_url", getSelectedCar(), func_to_handleonclick);