选项值不随用户选择而改变答案

【问题标题】：Option value not changing with user selection选项值不随用户选择而改变
【发布时间】：2016-11-29 16:40:08
【问题描述】：

我有一个带有以下 HTML 下拉选择菜单的表单：

<div class="input-field col s4">
    <select id="disposition" required>
        <option value="No_Sale" id="noSale">No Sale</option>
        <option value="Sale" id="yeahSale">Sale</option>
        <option value="Unreachable" id="noContact">Unreachable</option>
        <option value="Call_Back" id="callBack">Call Back</option>
    </select>
    <label>Disposition</label>
</div>

上面的sn-p for dispositions应该影响其他表单元素是否被禁用。但是，我似乎无法获得改变用户输入的值。

这里是带有 jQuery 的 javascript：

$(document).on('change', 'select', function(){
    console.log(disposition);
    console.log($("#yeahSale").selected == true);

    if ($("#yeahSale").selected == true) {
        $("#fund").removeAttr('disabled');
    }
});

对于$("#disposition").val() 和$("#yeahSale").selected，console.log 返回

“No_Sale”

当我点击表单元素并选择时为 false

“销售。”

我尝试的第一件事是：

    if (disposition == "Sale")

我也试过了：

var disposition = $("#disposition").find(":selected").text();

我已经在堆栈交换和谷歌上搜索了将近一个小时的答案，但到目前为止我还没有成功。如果我完全错过了一个已经解决的现存问题，我深表歉意。

感谢您的帮助！

【问题讨论】：

if (dispositon == "Sale")...
对不起，@Banzay。我忘了包括我已经尝试过了。我已经相应地更新了帖子。谢谢！
Check this solution
我认为您过于沉迷于提供ids 选项并与它们一起检查selected。通常使用select，您只需担心所选option 的值和/或options 的索引并从那里做出决定。
@wiljago。您已将函数绑定到整个 $(document) 的事件。您只需要在$("#disposition") 上捕获事件。我的意思是：$("#disposition").on('change',...

标签： javascript jquery html dom

【解决方案1】：

$("#disposition").val() 为您提供所选选项的值。

所以你只是想根据你选择的值放置条件。

$(document).on('change', '#disposition', function(){
    
    /* 
        If you want to put condition based on 
        option with specific id is selected or not  then
        
        if($("#yeahSale").is(':selected')) { 
           
        }
   */

    if ($("#disposition").val() == 'Sale') {
        // Do here what you want to do
        // $("#fund").removeAttr('disabled');
        console.log("Sale Selected");
    } else {
        console.log("Selected Option is: "+ $("#disposition").val());
    }
  
    //Get Id attr of selected option
    console.log("Id of selected option is: " + $(this).find('option:selected').attr('id'));
   
    // Check weather option with specific Id is selected or not:
    console.log($("#yeahSale").is(':selected'));
   
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s4">
    <select id="disposition" required>
        <option value="No_Sale" id="noSale">No Sale</option>
        <option value="Sale" id="yeahSale">Sale</option>
        <option value="Unreachable" id="noContact">Unreachable</option>
        <option value="Call_Back" id="callBack">Call Back</option>
    </select>
    <label>Disposition</label>
</div>

如果你想获得所选选项的 id 属性，你可以使用这个

$(this).find('option:selected').attr('id')

如果您想查看 ID 为yeahSale 的选项是否被选中，请尝试以下操作：

$("#yeahSale").is(':selected')

【讨论】：

谢谢！完全奇怪。在控制台日志中，它返回“Sale Selected”并且 $("#disposition").val() 是“Sale”。但是对于 console.log($("#yeahSale").selected == true) 它仍然返回 false，对于 $("#disposition").find(":selected").val() 它返回 "No_Sale. " .removeAttr 现在不起作用，但这个解决方案可能足以让它发挥作用。谢谢！我会处理这个问题，如果我得到它的功能，我会将它标记为已回答并更新帖子。
//console.log("Sale Selected");写在我的代码中，这就是你看到的原因。在其他部分，console.log 打印选定的值。
是的，那部分我明白了。很奇怪 $("#disposition).val() 正在发生变化，但该选项值并未按选定的方式出现。我只用 $("#disposition).val() 和发现那行不通。您的解决方案中似乎不同的主要内容是更改代码文档中的“选择”。我没有把它包括在内，但它显然有很大的不同。
感谢@lahar-shah！抱歉更新晚了——那天下午晚些时候，我被要求废弃整个东西，然后在 infopath 和 sharepoint 中重新制作它。但是当我今天测试时，您的解决方案完全有效。

【解决方案2】：

 <div class="input-field col s4">
 <select id="disposition">
    <option value="No_Sale">No Sale</option>
    <option value="Sale">Sale</option>
    <option value="Unreachable">Unreachable</option>
    <option value="Call_Back">Call Back</option>
  </select>
   <label>Disposition</label>
  </div>
<script>
  $(document).on('change', function(){
   alert($("#disposition").val());
  console.log($("#yeahSale").selected == true);

   if ($("#yeahSale").selected == true) {
    $("#fund").removeAttr('disabled');
   }
  });

  tested and found it working

【讨论】：

我猜是选项 id 的问题

【解决方案3】：

var disposition = $('#disposition').val();
$('#disposition').change(function() {
    disposition = $(this).val();
    console.log(disposition);
}

【讨论】：

感谢您的回复，@maestroosram。不幸的是，我得到了同样的结果。
@wiljago 我认为所有问题都在于您覆盖disposition 变量（并执行console.log()）。检查我的编辑。

【解决方案4】：

您只需要disposition.value 和onchange 事件。

每当做出新选择时，以下脚本将确认用户输入并返回更新后的disposition.value：

var disposition = document.getElementById('disposition');
disposition.addEventListener('change', function(){console.log(disposition.value);}, false);

<select id="disposition" required>
<option value="No_Sale">No Sale</option>
<option value="Sale">Sale</option>
<option value="Unreachable">Unreachable</option>
<option value="Call_Back">Call Back</option>
</select>

【讨论】：