HTML 中的“选择”标签不起作用

Question

<form name="form" action="https://kanbanflow.com/api/v1/tasks?" method="post">
<input type="text" name="name" id="name" />
<select>
<option value="258f2200948711e3b418a9a7">To-do</option>
<option value="258f220294b18a9a7">In progress</option>
<option value="258f2201948711e3b4507b78fb18a9a7">Do today</option>
<option value="258f2203948711ea7" selected="selected">Done</option>
</select>             
<button id ="button" value="submit">create_task</button>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ">
$(document).ready(function(){
$('select').on('change',function() {
  alert( this.value );
});
});
</script>

我们正在尝试从列表中选择该选项，但它不起作用。 谁能帮帮我吗

Answer 1

问题是您的script元素同时具有src属性和一些内容。 它不起作用：使用了src属性（并加载了 jQuery），但内容被忽略。 请参阅关于script HTML 4.01 规范。 （HTML5 验证器会对此发出警告。）解决方案是使用两个script元素：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ">
 </script>
<script>
$(document).ready(function(){
console.log('setting up');
  $('select').on('change',function() {
    alert( this.value );
  });
});
</script>

Answer 2

这有多个答案

对于单个选择 dom 元素，获取当前选择的值：

$('#dropDownId').val();

获取当前选中的文本：

$('#dropDownId :selected').text();

Answer 3

如果您需要获取所选选项的文本，请使用：

$(document).ready(function () {
    $('select').on('change', function () {
        // use .find() to get the selected option and then get the text it contains.
        alert($(this).find("option:selected").html()); /*Replace with .text() if it doesn't yield desired results*/ 
    });
});

否则，如果您需要获取其value属性的值，请使用：

$(document).ready(function () {
    $('select').on('change', function () {
        alert(this.value);
    });
});

演示

Answer 4

请查看此代码

<form name="form" action="https://kanbanflow.com/api/v1/tasks?" method="post">
        <input type="text" name="name" id="name" />
        <select>
            <option value="258f2200948711e3b418a9a7">To-do</option>
            <option value="258f220294b18a9a7">In progress</option>
            <option value="258f2201948711e3b4507b78fb18a9a7">Do today</option>
            <option value="258f2203948711ea7" selected="selected">Done</option>
        </select>
        <button id="button" value="submit">create_task</button>
    </form>

$(document).ready(function () {
    $('select').on('change', function () {
        alert($('select'));
        alert(this.value);
    });
});

演示： http : //jsfiddle.net/b57Lc/4/

Answer 5

如果您想查看选择了哪个选择选项，请使用此代码

<select id="selectlistid">
   <option value="whoa">WHOA!</option>
   <option value="huh">HUH?</option>
</select>

<script type="text/javascript">
function getlistvalue()
    {
    return document.getElementById('selectlistid').options[document.getElementById('selectlistid').selectedIndex].value;
    }
</script>

您需要记住使用 selectedIndex 值来获取正确的选项元素以获取该选项的实际值。