コンボボックス・ラジオボタン・チェックボックス

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Select Exam</title>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
function $id(id) {
  return $(document.getElementById(id));
}

$(document).ready(function(){
  $('button').on('click',function(){
    var $this = $(this);

    switch($this.data('type')){
    case 'btnFuel' :
      alert($('#fuel :selected').eq(0).val());
      break;

    case 'btnCar' :
      $.each($('input[name="type"]:checked'), function(idx,chkbox){
        var $chkbox = $(chkbox);
        alert($chkbox.val());
      });
      break;

    case 'btnPrice' :
      alert($('input[name="price"]:checked').eq(0).val());
      break;

    case 'btnMaker' :
      $.each($('#manufacturere :selected'), function(idx,cmbbox){
        var $cmbbox = $(cmbbox);
        alert($cmbbox.val());
      });
      break;

    case 'btnPost' :
      alert($('form').serialize());
      break;
    }
  })
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <form>
    <p>
      fuel type :
      <select id="fuel" name="fuel">
        <option value="DIE">diesel</option>
        <option value="GAS">gasoline</option>
        <option value="HYB">hybrid</option>
        <option value="EV">electric</option>
      </select>
    </p>
    <p>
      car type :
      <label>
        <input type="checkbox" name="type" value="FM"/> family
      </label>
      <label>
        <input type="checkbox" name="type" value="SP"/> sports
      </label>
      <label>
        <input type="checkbox" name="type" value="TR"/> truck
      </label>
    </p>
    <p>
      price :
      <label>
        <input type="radio" name="price" value="LOW" checked/> - $9,999
      </label>
      <label>
        <input type="radio" name="price" value="MID"/> $10,000 - $29,999
      </label>
      <label>
        <input type="radio" name="price" value="HIGH"/> $30,000 -
      </label>
    </p>
    manufacturer :
    <p>
      <select id="manufacturere" name="manufacturer" multiple>
        <option value="VM">Volks Wargen</option>
        <option value="TY">Toyota</option>
        <option value="GM">General Motors</option>
        <option value="NR">Nissan Renault</option>
        <option value="HY">Hyundai</option>
        <option value="FD">Ford</option>
        <option value="PM">PSA Mitsubishi</option>
        <option value="HN">Honda</option>
      </select>
    </p>
  </form>
  <button data-type="btnFuel">Fuel</button>
  <button data-type="btnCar">Car Type</button>
  <button data-type="btnPrice">Price</button>
  <button data-type="btnMaker">Manufacturer</button>
  <button data-type="btnPost">Serialize</button>
</body>
</html>

JSFとの共存

$.remove()、$.empty() で DOM 要素を削除

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Remove Example</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.tblArea {
	background-color: pink;
	width: 200px;
	height: 100px;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  resetTable();
  $('button').on('click',function(){
    var $this = $(this);
    switch($this.data('type')){
    case 'btnRemove' :
      $('#tbl').remove();
      break;
    case 'btnEmpty' :
      $('#tbl').empty();
      break;
    case 'btnReset' :
      resetTable();
      break;
    }
  });
});

function resetTable() {
  var $tblPlace = $('#tbl');
  if ($tblPlace.size() == 0) {
	  $('body').prepend('<div id=\"tbl\" class=\"tblArea\"></div>');
	  $tblPlace = $('#tbl');
  }
  var contents = '';
  contents = contents + '<table border=\"1\">'
  contents = contents + '<tr><td>Hyper Card</td><td><button data-item="001">Buy It</button</button></td></tr>';
  contents = contents + '<tr><td>Super Eraser</td><td><button data-item="002">Buy It</button</button></td></tr>';
  contents = contents + '<tr><td>Magic Pencil</td><td><button data-item="003">Buy It</button</button></td></tr>';
  contents = contents + '</table>'
  $tblPlace.html(contents);
  
  $('#tbl').find('button').on('click', function(){
    var $this = $(this);
    alert("add item-" + $this.data('item') + " to your shopping cart.");
  });
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  <div id="tbl" class="tblArea"></div>
  <button data-type="btnRemove">Remove</button>
  <button data-type="btnEmpty">Empty</button>
  <button data-type="btnReset">Reset</button>  
</body>
</html>

HTML


添付ファイル: fileRemove.html 1082件 [詳細] fileinput.html 1177件 [詳細] filejsf.html 1252件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2012-06-21 (木) 01:23:19 (1633d)
ISBN10
ISBN13
9784061426061