Question

我在下面有这个代码。试图获取所选选项的值，但第一个给出错误，test.parent不是函数，第二个变量得到一个空字符串。我怎样才能做到这一点？

<select unselectable="on" name="gender">
  <option value="Male" unselectable="on">Male</option>
  <option value="Female" unselectable="on">Female</option>
</select>
<input value="Submit" onclick="addItem(this)" type="button">

<script>
    function addItem(test){
        var selected_val1 = test.parent('#gender option:selected').val();
        var selected_val2 = $("#gender option:selected").text();
    }
</script>

Answer 1

您将this传递给addItem()函数，并将其缓存为test，这不是jQuery对象，而是本机DOM节点。

然后你正在做test.parent('#gender option:selected').val();，但是test没有父方法，也没有父选择元素。

select是前一个元素，因此您应该使用prev

$(test).prev('[name="gender"]').find('option:selected').val();

或只是

$(test).prev('select').val();

似乎更容易

Answer 2

var selected_val1 = $(test).parent().find('select[name="gender"] option:selected').val();

以下是一个例子：http://jsfiddle.net/z96c7025/

Answer 3

不建议使用内联JS，所以我会选择以下内容：

$('#mybutton').on('click', addItem);

function addItem() {

    //in this callback 'this' refers to the button that was clicked and,
    //as @adeneo has rightly pointed out, it should be wrapped in $()
    var selected_val1 = $(this).prev().val(),
        selected_val2 = $(this).prev().find('option:selected').text();

    alert( 'value: ' + selected_val1 + ' text: ' + selected_val2 );
}

$('#mybutton').on('click', addItem);

function addItem() {
  var selected_val1 = $(this).prev().val(),
      selected_val2 = $(this).prev().find('option:selected').text();
  alert( 'value: ' + selected_val1 + ' text: ' + selected_val2 );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select unselectable="on" name="gender">
  <option value="Male" unselectable="on">Male</option>
  <option value="Female" unselectable="on">Female</option>
</select>
<input value="Submit" type="button" id="mybutton">

Answer 4

正如其他人所说，内联JS并不总是一个好的选择，但如果你选择这样做，这些修改应该会有所帮助。 javascript可以更简单。

<强> HTML

<form>
  <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <input value="Submit" onclick="addItem(this.form)" type="button">  </form>
</form>

<强> JS

function addItem(form) {
  console.log(form.gender.value)
}

JS Extended

function addItem(form) {

  var gender = form.gender;

  for ( var i=0; i<gender.length; i++) {
    console.log('Option ' + i + ': ' + form.gender[i].value)
  }
  console.log('Selected option: ' + form.gender.value);

  var unselectedIndex = ( form.gender.selectedIndex + (form.length - 1))

  console.log('Unselected option: ' + form.gender[unselectedIndex].value)
}

单击按钮上的Jquery获取所选的选项值

4 个答案: