Question

我想在选择选项时知道选择的名称，例如：

如果我在select1中选择2选项我需要通过js或jquery来捕获select的名称（在本例中为select1），这就是为什么我在onchange中使用“this”作为参数，问题是我不知道如何用这个“这个”得到选择的名称，我尝试了this.name，但它不起作用。

有什么想法吗？

THX

<select onchange="jsFunction(this);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

编辑：

该功能几乎没有：

jsFuntion(element){
alert(element.name);
}

Answer 1

检查此代码段。它在控制台中给出了select的名称。

＆＃13;

function myfunction(Element)
    {
        console.log($(Element).prop("name"));
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select onchange="myfunction(this)" name="select1">
        <option selected>1</option>
        <option>2</option>
    </select>

    <select onchange="myfunction(this);" name="select2">
        <option selected>1</option>
        <option>2</option>
    </select>
</div>

＆＃13;

我希望这会有所帮助： - ）

Answer 2

如果您想让名称显示为jsFunction，请尝试此操作。

正如Pointy所说，你也可以使用obj.name

function jsFunction(obj) {
  //console.log($(obj).attr("name"))
  console.log(obj.name)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="jsFunction(this);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

Answer 3

您需要在函数中接收this作为参数，然后从该元素获取name属性，如下所示：

function jsFunction(el) {
  var name = el.name;
  console.log(name);
}

<select onchange="jsFunction(this);" name="select1">
  <option selected>1</option>
  <option>2</option>
</select>

<select onchange="jsFunction(this);" name="select2">
  <option selected>1</option>
  <option>2</option>
</select>

但是，on*事件属性通常被认为是不良做法，应尽可能避免。相反，你应该在JS代码中使用不显眼的事件处理程序：

document.querySelectorAll('select').forEach(function(el) {
  el.addEventListener('change', function() {
    var name = this.name;
    console.log(name);
  });
})

<select name="select1">
  <option selected>1</option>
  <option>2</option>
</select>

<select name="select2">
  <option selected>1</option>
  <option>2</option>
</select>

Answer 4

在您的jsFunction代码中，您可以取消引用name属性，如下所示：

function jsFunction(obj) {
console.log(obj.name);
}

<select onchange="jsFunction(this);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

传递this.name也有效。

function jsFunction(nm) {
console.log(nm);
}

<select onchange="jsFunction(this.name);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this.name);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

使用onchange事件获取select的名称

4 个答案: