Question

您好我有以下基本形式和select选项值元素。当用户选择表单中的项目时，我想使用jquery来提取与此选择关联的值。我已经在表单中存储了所需的值，但我不知道如何从数组中提取我需要的元素。我是一个jquery新手所以欢迎所有的帮助。这是我的代码：

＆＃13;

$("select[player=name1]").on('change', function() {
  $('#Player_1').html($(this).find('option:selected').text());
  playerarray1 = $('option:selected').val();
  alert(playerarray1);
});

$("select[player=name2]").on('change', function() {
  $('#Player_2').html($(this).find('option:selected').text());
  playerarray2 = $('option:selected').val();
  alert(playerarray2);
});

$("select[player=name3]").on('change', function() {
  $('#Player_3').html($(this).find('option:selected').text());
  playerarray3 = $('option:selected').val();
  alert(playerarray3);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Please select a footballer:</h2>

<div id="forms-col">
  <form name="" action="" id="formID">
    <label>Player 1:</label>
    <select player="name1">
      <option value='0'>-</option>
      <option value="{Team_Name:'Arsenal',Player_Ref:'1',Player_Name:'Mesut Ozil', Points:'5'}">Arsenal - Mesut Ozil - 5</option>
      <option value="{Team_Name:'Liverpool',Player_Ref:'2',Player_Name:'Daniel Sturridge', Points:'4'}">Liverpool - Daniel Sturridge - 4</option>
      <option value="{Team_Name:'Barcelona',Player_Ref:'3',Player_Name:'Lionel Messi', Points:'2'}">Barcelona - Lionel Messi - 2</option>
      <option value="{Team_Name:'PSG',Player_Ref:'4',Player_Name:'David Luis', Points:'4'}">PSG - David Luis - 7</option>
    </select>
    <BR>
    <label>Player 2:</label>
    <select player="name2">
      <option value='0'>-</option>
      <option value="{Team_Name:'Arsenal',Player_Ref:'1',Player_Name:'Mesut Ozil', Points:'5'}">Arsenal - Mesut Ozil - 5</option>
      <option value="{Team_Name:'Liverpool',Player_Ref:'2',Player_Name:'Daniel Sturridge', Points:'4'}">Liverpool - Daniel Sturridge - 4</option>
      <option value="{Team_Name:'Barcelona',Player_Ref:'3',Player_Name:'Lionel Messi', Points:'2'}">Barcelona - Lionel Messi - 2</option>
      <option value="{Team_Name:'PSG',Player_Ref:'4',Player_Name:'David Luis', Points:'4'}">PSG - David Luis - 7</option>
    </select>
    <BR>
    <label>Player 3:</label>
    <select player="name3">
      <option value='0'>-</option>
      <option value="{Team_Name:'Arsenal',Player_Ref:'1',Player_Name:'Mesut Ozil', Points:'5'}">Arsenal - Mesut Ozil - 5</option>
      <option value="{Team_Name:'Liverpool',Player_Ref:'2',Player_Name:'Daniel Sturridge', Points:'4'}">Liverpool - Daniel Sturridge - 4</option>
      <option value="{Team_Name:'Barcelona',Player_Ref:'3',Player_Name:'Lionel Messi', Points:'2'}">Barcelona - Lionel Messi - 2</option>
      <option value="{Team_Name:'PSG',Player_Ref:'4',Player_Name:'David Luis', Points:'4'}">PSG - David Luis - 7</option>
    </select>

  </form>
</div>
<div>
  <h2>Selected Goalscorers</h2>

  <table border="1">

    <tr>
      <td></td>
      <td>Form Select Info</td>
      <td>Team Name</td>
      <td>Player Name</td>
      <td>Player_Ref</td>
      <td>Points</td>
    </tr>
    <tr>
      <td>Player 1:</td>
      <td><span id="Player_1"></span>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Player 2:</td>
      <td><span id="Player_2"></span>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Player 3:</td>
      <td><span id="Player_3"></span>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

＆＃13;

Answer 1

如果你使你的值有效JSON如下：

<option value='{"Team_Name":"Arsenal","Player_Ref":"1","Player_Name":"Mesut Ozil", "Points":"5"}'>Arsenal - Mesut Ozil - 5</option>

...您可以在JSON.parse处理程序中使用change解析它们：

var data = JSON.parse($(this).val());
console.log(data.Team_Name); // Arsenal

请注意，option的{{1}}属性使用单引号，其中的属性名称和字符串值使用双引号（JSON需要双引号）。我已经离开value和Player_Ref字符串了，因为你用引号括起来了，但它们看起来像数字，在这种情况下你可以让Points离开它们：

如何使用JQuery从同一表单选择项中提取多个值？

1 个答案: