ChatGPT解决这个技术问题 Extra ChatGPT

jQuery选择更改事件获取选择的选项

我在我的选择元素的更改事件上绑定了一个事件:

$('select').on('change', '', function (e) {

});

如何访问发生更改事件时选择的元素?

@superuberduper 我尽可能避免使用 jquery,但抵抗是徒劳的。被同化后,你会感觉好多了。

N
Naftali
$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

$("selector", this) 语法是什么意思?我有一个大致的想法,但我不完全确定
@JoshWillik 与 $("selector", this) 您在 this 的上下文中找到所有 selector 元素。写 $("selector", this)$(this).find('selector') 几乎相同
@JoshWillik:由于 $()jQuery() 的别名,您可以在此处找到文档:api.jquery.com/jQuery 声明的签名显然是 jQuery( selector [, context ] )。 @Bellash:如果它“几乎相同”,有什么区别?或者什么更快?我更喜欢 .find(),因为这更 OO IMO...
多选时如何检查?
@AdrianFöder 对于您和其他正在寻找它的人,根据此答案,.find() 的速度大约快 10%:stackoverflow.com/a/9046288/2767703
B
Bellash

您可以使用 jQuery find 方法

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

上述解决方案完美运行,但我选择为愿意获得点击选项的他们添加以下代码。即使此选择值未更改,它也允许您获取所选选项。 (仅使用 Mozilla 测试)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

绑定到 option 事件是一个冒险的提议,尤其是在移动设备上。例如,Webkit 不正确支持此事件:bugs.chromium.org/p/chromium/issues/detail?id=5284
嗯不错!正如我所说,许多浏览器不支持第二种解决方案!
C
Community

委托替代

如果有人将 delegated approach 用作他们的侦听器,请使用 e.target(它将引用 select 元素)。

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle Demo


+1,因为这是我想要的,但是当我在本地尝试时,它不起作用。仅在 jsfiddle 工作,我必须添加什么 CDN?
佚名
<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

首先创建一个 select option。之后使用 jquery,您可以在用户更改 select option 值时获取当前选择的值。


你能分享你的答案更详细的解释吗?
@MostafizurRahman 我的代码很简单,这就是我只写代码的原因。
简单和更少的代码谢谢,我正在寻找这个答案。
u
user229044

我觉得这个更短更干净。此外,如果有多个,您可以遍历选定的项目;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

selectedOptions 并非在所有浏览器中都可用。
@BernhardDöbler 哪些?任何来源?
我将您的代码复制到 IE 11 并出现错误。我最终得到了 this.options[ this.options.selectedIndex ]Mozilla 表示 Firefox 从 26 开始支持,IE 不支持。
除 IE 外,所有浏览器都支持它。 developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…
S
Serdar Karaca
$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

R
Recep Can

另一种获取选定值的值的简短方法,

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

如果是这种情况,为什么“var selectedVal=$("#selectElement").val()" 不起作用¿
当在选择元素上发出更改事件时,案例正在获得价值。如果您这样做,则选择更改时不会更新值。
m
mickySimons

这也可以正常工作

(function(jQuery) { $(document).ready(function() { $("#select_menu").change(function() { var selectedOption = $("#select_menu").val() }); }) ; })(jQuery);


a
alex Roosso

请参阅官方 API 文档 https://api.jquery.com/selected-selector/

这个好作品:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

并容易做出独特的选择

var SelVal = $( "#idSelect option:selected" ).val();

D
Developer

您可以使用此 jquery 选择更改事件来获取选定的选项值

For Demo

$(document).ready(function () { $('body').on('change','#select', function() { $('#show_selected').val(this.value); }) ; }); 学习jquery取值方法