如何使用JQuery / JSon从select选项中获取所选项目

时间:2017-02-14 03:05:03

标签: javascript jquery json

所以我有这个功能:我想从我的选择中获取所选项目,但没有任何作用,我已尝试使用所选功能但仍然没有运气,我想我在这里遗漏了一些东西。< / p>

function edit_fnc(x){
    var rowIndex    = $(x).parent().parent().index();
    groupingDataTable.edit_row(rowIndex);
    $('#lblStatus').html('');
      $.getJSON(backstage,
        {   
            action:RequestType.FetchBranch

        },
        function(data) {
        $.each(data,function(key,value) {
              $("#forbranch").append($("<option></option>").val(value.wid).text(value.name));

    });
        });
}

3 个答案:

答案 0 :(得分:1)

我没有你正在使用的HTML,但如果你正在使用jQuery,我们可以使用原生HTML事件和jQuery来获得一个很好的组合。您的选择应位于表单元素中,因此我们使用'submit'事件和$.serializeArray()来获取表单中的值。

这是一些虚拟HTML

<form>
  <select name="number">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
  <select name="letter">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>
  <button type="submit">Submit</button>
</form>
<pre id="results"></pre>

现在有些Javascript可以获取值:

$('form').submit(e => {
  let json = JSON.stringify($(e.currentTarget).serializeArray());
  $('#results').html(json);

  e.preventDefault();
});

这是codepen链接http://codepen.io/alexsasharegan/pen/WRPjXK

这不是具体的答案,但我没有完全理解这个问题。抛出一些后续问题,我会尝试进一步帮助。

答案 1 :(得分:1)

也许我对会议感到有些困惑。通常,事件处理程序采用短格式e或长格式event。在jQuery中包装HTML元素时,最好在它们前面添加美元符号,这样我们就知道它们是元素的jQuery实例。

假设选择和按钮不相关,这里有一些HTML:

<form>
    <select name="mySelect" id="mySelect">
        <option value="theValue">the text</option>
    </select>
</form>

javascript

const $button   = $( 'button' );
const $mySelect = $form.find( 'form select' );

function getSelectedOption( event ) {
    const selectedValue     = $mySelect.val();
    const selectedInnerText = $mySelect.find( 'option:selected' ).text();

    console.log( { selectedValue, selectedInnerText } );
}

$button.click( getSelectedOption );

这应记录"theValue"下的selectedValue"the text"下的selectedInnerText

答案 2 :(得分:0)

function edit_fnc( x ) {
    var rowIndex = $( x ).parent().parent().index();
    groupingDataTable.edit_row( rowIndex );
    $( '#lblStatus' ).html( '' );

    // you'll have to implement this
    let selected = getSelected( x );

    $.getJSON( backstage, { action: RequestType.FetchBranch }, function ( data ) {
        $.each( data, function ( key, value ) {
            $( "#forbranch" ).append(
                // and you'll have to figure out the correct equality check here
                `<option value="${value.wid}" ${this == selected ? 'selected' : ''}>${value.name}</option>`
            );
        } );
    } );
}

好的,我不完全确定你的函数的机制,但你只需要弄清楚如何对你点击事件的值进行相等性检查,与你从服务器加载的值相比。