Javascript 使用指定给变量的值调整div的大小

我有3个选项的选择菜单。使用.change函数，我设置了3个具有div宽度的变量。如何将选择菜单值引用到.change函数中的变量以传递新的宽度值

示例：如果选择了太妃糖，我需要$'newDIV的宽度为$'dv1'。宽度*0.35

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

尝试以下方法：

$("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);
});

$("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)
  });

演示：

尝试：

<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); 
    })

---

有一个条件语句。这样做：

$( "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' ?
})

---

您可以获取所选选项的值并对其应用开关大小写

$( "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' ?
})

试试这个：

$("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);
});

$("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)
  });

---

当然，还有面向未来观众的香草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);
    }
})();

---

将该值保持在范围内，不要给出任何宽度。@RayonDabre谢谢，但对我来说没有任何意义？@madalinivascu谢谢，但我担心这行不通。因为b应该来自select值，而不是在那里键入。谢谢，但我认为已经有类似的答案了。@Becky在我发布此答案时，类似的答案已经发布了。我迟到了：很好，你觉得你的答案比madalin ivascu好吗？不是比较，而是了解你的想法。@Becky我的回答是假设你的HTML不会改变，但是如果你可以改变HTML，那么你应该像你的方法一样使用Mandalin的方法。几点建议:1。将parseFloat用于val 2。语法错误3。宽度4不需要px。确保val存在，否则使用1