2017年7月18日 星期二

Html-CheckBox 多選選單操作

我們要如何製作一個簡單的單選選單?
要如何取到選單對應的參數?
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)


A
B
C
<form>
    <input type="checkbox" name="vehicle" value="0">A<br>
    <input type="checkbox" name="vehicle" value="1">B<br>
    <input type="checkbox" name="vehicle" value="2">C<br>
</form>

如何取出 select radioBox value ?

var valuelist = ''; 

$('input[name="vehicle"]:checked').each(function() {
    valuelist += this.value + ',';
});

Html-RadioBox 單選選單操作

我們要如何製作一個簡單的單選選單?
要如何取到選單對應的參數?
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

Male
Female
Other
<form>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other
</form>

如何取出 select radioBox value ?

var radioVar = $('input[name=gender]:checked').val();

Html-Option 下拉選單操作

我們要如何製作一個簡單的下拉選單?
要如何取到選單對應的參數?文字?
此篇文章會提到如何使用 JS (JavaScript), JQ (JQuery)

以下是範例 :



<select id="selectId" onchange="changeOption();">
  <option value="0">請選擇</option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
  <option value="4">d</option>
</select>

如何取出 select option value ?

var optionVar = $('#selectId').val();

如何取出 select option text ?

var optionText = $('#selectId option:selected').text();

如何設置被選擇的參數 ?
$("#selectId").val("2").change();


2017年7月12日 星期三

JavaScript-客製化日期選單

// 年度
var date = new Date();
var minYear = 1940,maxMonth = date.getFullYear(),
    selectYear = document.getElementById('selectYear');

for (var i = minYear; i<=maxMonth; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    selectYear.appendChild(opt);
}

// 月份
var minMonth = 1,maxMonth = 12,
    selectMonth = document.getElementById('selectMonth');

for (var i = minMonth; i<=maxMonth; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    selectMonth.appendChild(opt);
}

// 預設日期
daysInThisMonth();

// 日期
function daysInThisMonth() {
  var date_var = new Date(date.getFullYear(), date.getMonth()+1, 0).getDate();
  var minDay = 1,maxDay = date_var,
      selectDay = document.getElementById('selectDay');
    selectDay.options.length = 0;
  for (var i = minDay; i<=maxDay; i++){
      var opt = document.createElement('option');
      opt.value = i;
      opt.innerHTML = i;
      if(i == 1){
      opt.selected = "true";
      }
     
      selectDay.appendChild(opt);
  }
}