javascript - 从下拉框中选择时启用字段

Question

我的联系表单页面用于用户编辑详细信息，有两个下拉字段:“国家/地区”和“城市”。我希望当用户编辑其详细信息时，“城市”字段将被禁用，直到在“国家/地区”下拉菜单中选择某些内容。

<form name="item" action="<?php echo base_url(true) ?>" method="post">

<label><?php _e('Country', 'my_theme'); ?></label>
<?php ItemForm::country_select(get_countries(),user()) ; ?>

<label><?php _e('City', 'my_theme'); ?></label>
<?php ItemForm::cities_select(get_cities(),user()) ; ?>

<button class="itemFormButton" type="submit"></button>
</form>

我在 JavaScript 中尝试过“onchange”，可能语法错误......

我该如何创建这个？谢谢。

Answer 1

这可能对您有帮助http://jsfiddle.net/GZ269/ 。这使用了jquery。

Country:<br />
<select id="drop1">
    <option value="">Select Country</option>
    <option value="c1">Country 1</option>
    <option value="c2">Country 2</option>
</select>
<br />
City:<br />
<select id="drop2" disabled >
    <option value="">Select Country</option>
    <option value="c1">Country 1</option>
    <option value="c2">Country 2</option>
</select>

Javascript函数:

$("#drop1").change(function(){
    var country = $(this).val();

    if(!country){
        $("#drop2").attr("disabled", true);
        return false;
    }

    $("#drop2").attr("disabled", false);
});​