Question

我有一个包含3个选项的选择菜单。使用.change函数我设置了3个宽度为div的变量。如何将选择菜单VALUE引用到.change函数内的变量以传递新的宽度值？

示例：如果选中Taffy，我需要将$('#newDIV")的宽度设为$('#dv1').width() * 0.35

<select name="sweets">
  <option value="a">Chocolate</option>
  <option value="b">Taffy</option>
  <option value="c">Fudge</option>
</select>

$( "select" ).change(function () {
    var a = $('#dv1').width() * 0.9;
    var b = $('#dv1').width() * 0.35;
    var c = $('#dv1').width() * 0.2;

   $('#newDIV").width( $(this).val() + 'px'); //outputs 'bpx' ?
})

请建议是否有更好的方法来实现这一目标。

Answer 1

试试这个：

$("select").on('change', function() {
    var divWidth = $('#dv1').width();

    var newWidth;

    switch ($(this).val()) {
        case 'a':
            newWidth = divWidth * 0.9;
            break;
        case 'b':
            newWidth = divWidth * 0.35;
            break;
        case 'c':
            newWidth = divWidth * 0.2;
            break;
        default:
            // Set default width here

    }

    $('#newDIV').width(newWidth);
});

演示：https://jsfiddle.net/tusharj/2szymspp/

Answer 2

尝试：

<select name="sweets">
      <option value="0.9">Chocolate</option>
      <option value="0.35">Taffy</option>
      <option value="0.2">Fudge</option>
    </select>

    $( "select" ).change(function () {
        var val = $(this).val()? parseFloat($(this).val()) :1,
        a = $('#dv1').width() * val;
       $('#newDIV').width(a); 
    })

Answer 3

有条件陈述。做这样的事情：

$( "select" ).change(function () {
  var selectedVal = $(this).val();
  if(selectedVal == 'a')
    var newWidth = $('#dv1').width() * 0.9;
  else if(selectedVal == 'b')
    var newWidth = $('#dv1').width() * 0.35;
  else if(selectedVal == 'c')
    var newWidth = $('#dv1').width() * 0.2;

   $("#newDIV").width( newWidth + 'px'); //outputs 'bpx' ?
})

Answer 4

您可以获取所选选项的值并对其应用切换案例。

$( "select" ).change(function () {
    var selectedValue = this.value;
    switch(selectedValue) {
        case 'a':
            $('#dv1').width() * 0.9;
            break;
        case 'b':
            $('#dv1').width() * 0.35;
            break;
        case 'c':
            $('#dv1').width() * 0.2;
            break;                     
    }
   $('#newDIV').width( $(this).val() + 'px'); //outputs 'bpx' ?
})

Answer 5

试试这个：

$("select").on("change", function()
  {
    var widthFactor = 0.5;
    var strLen = $(this).find("option:selected").html().length;
    var myWidth = (strLen * widthFactor) + 'px';
    $("yourSelector").css("width", myWidth)
  });

Answer 6

当然，未来观众的香草javascript选项

<select name="sweets">
    <option value="0.9">Chocolate</option>
    <option value="0.35">Taffy</option>
    <option value="0.2">Fudge</option>
</select>

(function () {
    "use strict"
    var selects = document.getElementsByTagName('select'), select,
        dv1 = document.getElementById('dv1'),
        newDiv = document.getElementById('newDiv');
    for (var i = 0; select = selects[i]; i++) {
        select.addEventListener('change',function(){
            var val = this.value ? parseFloat(this.value) : 1;
            var a = dv1.scrollWidth * val;
            newDiv.width(a);
        },false);
    }
})();

使用分配给变量的值调整div的大小

6 个答案: