[英]Change option on button click
我正在尝试编写一个用户脚本,该脚本将在下拉菜单下方添加按钮,并根据单击的按钮更改值。 这里有3个单独的下拉菜单:
<fieldset>
<div style="float: left;">
<div><label>Number of big seeds</label> <select class="form-control" name="big"> <optgroup label="big"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></optgroup> </select></div>
<div><label>Number of small seeds</label> <select class="form-control" name="small"><optgroup label="small"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></optgroup> </select></div>
<div><label>Number of tiny seeds</label> <select class="form-control" name="tiny"><optgroup label="tiny"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option> </optgroup> </select></div>
这是我对用户脚本的尝试失败:
$(document).ready(function() {
//Variables for buttons
var $0 = $('<button type="button" class="0" id="0">0</button>');
var $1 = $('<button type="button" class="0" id="1">1</button>');
var $2 = $('<button type="button" class="0" id="2">2</button>');
var $3 = $('<button type="button" class="0" id="3">3</button>');
var $4 = $('<button type="button" class="0" id="4">4</button>');
var $5 = $('<button type="button" class="0" id="5">5</button>');
var $6 = $('<button type="button" class="1" id="0">0</button>');
var $7 = $('<button type="button" class="1" id="1">1</button>');
var $8 = $('<button type="button" class="1" id="2">2</button>');
var $9 = $('<button type="button" class="1" id="3">3</button>');
var $10 = $('<button type="button" class="1" id="4">4</button>');
var $11 = $('<button type="button" class="1" id="5">5</button>');
var $12 = $('<button type="button" class="2" id="0">0</button>');
var $13 = $('<button type="button" class="2" id="1">1</button>');
var $14 = $('<button type="button" class="2" id="2">2</button>');
var $15 = $('<button type="button" class="2" id="3">3</button>');
var $16 = $('<button type="button" class="2" id="4">4</button>');
var $17 = $('<button type="button" class="2" id="5">5</button>');
//Add buttons
$('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
$('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
$('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);
});
//Click event
$(":button").click(function(){
var thisClass = parseInt($(this).attr('class'));
var thisID = parseInt($(this).attr('id'));
$('.form-control').eq(thisClass).val(thisID);
});
有人可以告诉我我要去哪里了吗?
您将立即绑定click事件,但是在文档准备好之前不添加按钮。 追加按钮后,将.click()
调用放入$(document).ready()
内。
$(document).ready(function() {
//Variables for buttons
var $0 = $('<button type="button" data-index="0" data-value="0">0</button>');
var $1 = $('<button type="button" data-index="0" data-value="1">1</button>');
var $2 = $('<button type="button" data-index="0" data-value="2">2</button>');
var $3 = $('<button type="button" data-index="0" data-value="3">3</button>');
var $4 = $('<button type="button" data-index="0" data-value="4">4</button>');
var $5 = $('<button type="button" data-index="0" data-value="5">5</button>');
var $6 = $('<button type="button" data-index="1" data-value="0">0</button>');
var $7 = $('<button type="button" data-index="1" data-value="1">1</button>');
var $8 = $('<button type="button" data-index="1" data-value="2">2</button>');
var $9 = $('<button type="button" data-index="1" data-value="3">3</button>');
var $10 = $('<button type="button" data-index="1" data-value="4">4</button>');
var $11 = $('<button type="button" data-index="1" data-value="5">5</button>');
var $12 = $('<button type="button" data-index="2" data-value="0">0</button>');
var $13 = $('<button type="button" data-index="2" data-value="1">1</button>');
var $14 = $('<button type="button" data-index="2" data-value="2">2</button>');
var $15 = $('<button type="button" data-index="2" data-value="3">3</button>');
var $16 = $('<button type="button" data-index="2" data-value="4">4</button>');
var $17 = $('<button type="button" data-index="2" data-value="5">5</button>');
//Add buttons
$('.form-control').eq(0).after($0,$1,$2,$3,$4,$5);
$('.form-control').eq(1).after($6,$7,$8,$9,$10,$11);
$('.form-control').eq(2).after($12,$13,$14,$15,$16,$17);
//Click event
$(":button").click(function(){
var thisIndex = $(this).data('index');
var thisValue = $(this).data("value");
$('.form-control').eq(thisIndex).val(thisValue);
});
});
您也不应为元素提供重复的ID。 我将其更改为使用数据属性。 虽然可以复制类,但仅使用它们来保存有关元素的数据并不是真正合适的,因此我也将它们更改为数据属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.