如何在下拉值更改时检测值

时间:2017-09-16 17:35:03

标签: javascript jquery html

我试图在每次更改时获取下拉值。我已经知道onchange函数仅在我们明确更改下拉列表的值时才有效。

当Checkbox选中它进入selectChangeHandler函数时,设置任何默认值同时下拉选择值也应警告确保它是从dropdown onchange函数加载而不是从selectChangeHandler加载。当我通过使用onchange函数显式更改时,我能够获得下拉值,但第一次选中复选框时,onchange函数中没有显示哪个默认值设置。  。

请帮我解决这个问题。



function selectChangeHandler() {
    //get option with value 3 and set selected
    $("#cityNames option[value=3]").prop('selected', 'selected');    
}

$(document).ready(function() {
    $("select").change(function() {
        alert("you have changed the value ");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CheckBox start-->
Do you want to Select City ? <input type="checkbox" name="checkbox1" onclick = "selectChangeHandler()" />
 <!-- CheckBox end-->
</br></br>
 <!-- City DropDown Construction start-->
<select id="cityNames" class="selectChange">
    <option value="1" selected>USA</option>
    <option value="2">SA</option>
    <option value="3">INDIA</option>
    <option value="4">CANADA</option>
</select>
<!--City  DropDown Construction End -->
</br></br>

<!-- input text box which display value control has forwarded from dropdown -->
<input type="text" name="cityName" disabled><br>
<!-- input text box which display value control has forwarded from dropdown -->
&#13;
&#13;
&#13;

请帮我解决这个问题

2 个答案:

答案 0 :(得分:1)

在其他SO问题上有很多例子,例如:jQuery Get Selected Option From Dropdown。这是一个应该与您的代码一起使用的示例:

function selectChangeHandler(){
    //get option with value 3 and set selected
    $("#cityNames option[value=3]").prop('selected', 'selected'); 

}

$(document).ready(function() {
    $("#checkbox1").change(function () {
        if ($(this).is(":checked")){
               selectChangeHandler();
        };
    });
    $("#cityNames").change(function () {
        var selectValue = $(this).val()
        alert("you have changed the value " + selectValue);
    });
});

我强烈建议您通过http://try.jquery.com/的jquery学习课程。这是一个关于jquery的非常棒的教程,它将帮助你获得一个良好的开端。

答案 1 :(得分:0)

您可以通过这种方式获得价值

&#13;
&#13;
function selectChangeHandler() {
    //get option with value 3 and set selected
    $("#cityNames option[value=3]").prop('selected', 'selected');
}

$(document).ready(function() {
    $("#cityNames").change(function() {
        alert($(this).val());
    });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CheckBox start-->
Do you want to Select City ? <input type="checkbox" name="checkbox1" onclick = "selectChangeHandler()" />
 <!-- CheckBox end-->
</br></br>
 <!-- City DropDown Construction start-->
<select id="cityNames" class="selectChange">
    <option value="1" selected>USA</option>
    <option value="2">SA</option>
    <option value="3">INDIA</option>
    <option value="4">CANADA</option>
</select>
<!--City  DropDown Construction End -->

<br><br>

<!-- input text box which display value control has forwarded from dropdown -->
<input type="text" name="cityName" disabled><br>
<!-- input text box which display value control has forwarded from dropdown -->
&#13;
&#13;
&#13;