Zeige Optionsfelder, abhängig davon, welchen Wert ein Dropdown hat?

Question

Ich möchte zwei oder mehr Optionsfelder anzeigen, abhängig davon, welchen Wert mein Dropdown hat. und für einige Werte möchte ich keine Radioknöpfe anzeigen.

Wie würde ich das tun? Ich habe verschiedene Dinge ausprobiert, aber Javascript/Jquery ist nicht mein Bestes. Versucht, verschiedene Stapelpfosten zu betrachten, aber keiner hat mir geholfen.

JS Snippet

var imageObject, index, len, selector, fontLoaded = false, 
 
    imageLoaded = false; 
 
WebFont.load({ 
 
    google: { 
 
     families: ['Oswald'] 
 
    }, 
 
    active: function() { 
 
     fontLoaded = true; 
 
     if (imageLoaded) { 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     } 
 
    }, 
 
}); 
 
var leftColor = "rgb(35, 184, 94)", 
 
    rightColor = "rgb(16, 18, 32)", 
 
    font = "Oswald", 
 
    textColor = "#FFF", 
 
    text = "Battle.net", 
 
    textSize = 50, 
 
    textVertAlign = 40, 
 
    image = "image1", 
 
    canvas, canvasHeight = 95, 
 
    ctx; 
 
var colorPalette = [ 
 
    ["#fff", "#000"], 
 
    ["#1abc9c", "#16a085", "#2ecc71", "#27ae60"], 
 
    ["#3498db", "#2980b9", "#9b59b6", "#8e44ad"], 
 
    ["#f1c40f", "#f39c12", "#e67e22", "#d35400"], 
 
    ["#ecf0f1", "#95a5a6", "#bdc3c7", "#7f8c8d"] 
 
]; 
 
var imageLocation = "./img/icons/"; 
 
var images = { 
 
    "Battle.net": imageLocation + "battlenet.png", 
 
    "Chat": imageLocation + "chat.png", 
 
    "Computer": imageLocation + "computer.png", 
 
    "Controller": imageLocation + "controller.png", 
 
    "Crown": imageLocation + "crown.png", 
 
    "Deviant Art": imageLocation + "deviantart.png", 
 
    "Discord": imageLocation + "discord.png", 
 
    "Exclamation Mark": imageLocation + "exclamation.png", 
 
    "Extra Life": imageLocation + "extralife.png", 
 
    "Facebook": imageLocation + "facebook.png", 
 
    "Gamewisp": imageLocation + "gamewisp.png", 
 
    "G2A": imageLocation + "g2a.png", 
 
    "Heart": imageLocation + "heart.png", 
 
    "Instagram": imageLocation + "instagram.png", 
 
    "Keyboard": imageLocation + "keyboard.png", 
 
    "Money": imageLocation + "money.png", 
 
    "Mouse": imageLocation + "mouse.png", 
 
    "Music Notes": imageLocation + "musicnotes.png", 
 
    "Network Icon": imageLocation + "network.png", 
 
    "Nerd or Die": imageLocation + "nod.png", 
 
    "Patreon": imageLocation + "patreon.png", 
 
    "Paypal": imageLocation + "paypal.png", 
 
    "Playstation": imageLocation + "psn.png", 
 
    "Plays.tv": imageLocation + "playstv.png", 
 
    "Plus": imageLocation + "plus.png", 
 
    "Pokemon": imageLocation + "pokeball.png", 
 
    "Question Mark": imageLocation + "questionmark.png", 
 
    "Robot": imageLocation + "robot.png", 
 
    "Schedule": imageLocation + "schedule.png", 
 
    "Snapchat": imageLocation + "snapchat.png", 
 
    "Star": imageLocation + "star.png", 
 
    "Steam": imageLocation + "steam.png", 
 
    "Team Speak": imageLocation + "teamspeak.png", 
 
    "Thumbs Up": imageLocation + "thumbsup.png", 
 
    "Trophy": imageLocation + "trophy.png", 
 
    "Tumblr": imageLocation + "tumblr.png", 
 
    "Twitch": imageLocation + "twitch.png", 
 
    "Twitter": imageLocation + "twitter.png", 
 
    "Uplay": imageLocation + "uplay.png", 
 
    "Wishlist - Amazon": imageLocation + "amazon.png", 
 
    "Xbox": imageLocation + "xbox.png", 
 
    "YouTube": imageLocation + "youtube.png" 
 
}; 
 
var keys = Object.keys(images); 
 
for (index = 0, len = keys.length; index < len; index++) { 
 
    var temp = keys[index]; 
 
    var newoption = new Option(temp, images[temp]); 
 
    document.getElementById('imagelist').add(newoption); 
 
} 
 

 
function init() { 
 
    canvas = document.getElementById("canvas"); 
 
    ctx = canvas.getContext("2d"); 
 
    selector = document.getElementById("imagelist"); 
 
    changeImage(); 
 
    selector.addEventListener("change", changeImage); 
 
    $("#leftColorInput").spectrum({ 
 
     color: leftColor, 
 
     showInput: true, 
 
     className: "full-spectrum", 
 
     showInitial: true, 
 
     showPalette: true, 
 
     showSelectionPalette: true, 
 
     maxSelectionSize: 10, 
 
     preferredFormat: "hex", 
 
     localStorageKey: "spectrum.demo", 
 
     palette: colorPalette, 
 
     move: function(color) { 
 
      leftColor = color.toHexString(); 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     }, 
 
     change: function(color) { 
 
      leftColor = color.toHexString(); 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     } 
 
    }); 
 
    $("#rightColorInput").spectrum({ 
 
     color: rightColor, 
 
     showInput: true, 
 
     className: "full-spectrum", 
 
     showInitial: true, 
 
     showPalette: true, 
 
     showSelectionPalette: true, 
 
     maxSelectionSize: 10, 
 
     preferredFormat: "hex", 
 
     localStorageKey: "spectrum.demo", 
 
     palette: colorPalette, 
 
     move: function(color) { 
 
      rightColor = color.toHexString(); 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     }, 
 
     change: function(color) { 
 
      rightColor = color.toHexString(); 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     } 
 
    }); 
 
    $("#textColorInput").spectrum({ 
 
     color: textColor, 
 
     showInput: true, 
 
     className: "full-spectrum", 
 
     showInitial: true, 
 
     showPalette: true, 
 
     showSelectionPalette: true, 
 
     maxSelectionSize: 10, 
 
     preferredFormat: "hex", 
 
     localStorageKey: "spectrum.demo", 
 
     palette: colorPalette, 
 
     move: function(color) { 
 
      textColor = color.toHexString(); 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     }, 
 
     change: function(color) { 
 
      textColor = color.toHexString(); 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     } 
 
    }); 
 
} 
 

 
function changeImage() { 
 
    imageURL = selector.value; 
 
    imageObject = new Image(); 
 
    imageObject.onload = function() { 
 
     imageLoaded = true; 
 
     if (fontLoaded) { 
 
      draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
     } 
 
    }; 
 
    imageObject.src = imageURL; 
 
} 
 

 
function setLeftColor(color) { 
 
    leftColor = color; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
} 
 

 
function setRightColor(color) { 
 
    rightColor = color; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
} 
 

 
function setText(textInput) { 
 
    text = textInput; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
} 
 

 
function setFont(fontInput) { 
 
    font = fontInput; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
} 
 

 
function setTextSize(textSizeInput) { 
 
    textSize = textSizeInput; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
    var rangeNumber = document.getElementById("textRangeNumber"); 
 
    rangeNumber.innerHTML = textSize; 
 
} 
 

 
function setTextVertSize(textVertSizeInput) { 
 
    textVertAlign = textVertSizeInput; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
    var rangeNumber = document.getElementById("textVertRangeNumber"); 
 
    rangeNumber.innerHTML = textVertAlign; 
 
} 
 

 
function changeCanvasSize(canvasSize) { 
 
    canvasHeight = canvasSize; 
 
    draw(ctx, leftColor, rightColor, font, textColor, text, image, textSize, textVertAlign); 
 
    if (canvasHeight == 80) { 
 
     $("#hidePadding").show(); 
 
    } else if (canvasHeight == 95) { 
 
     $("#hidePadding").hide(); 
 
    } 
 
} 
 

 
function draw(ctx, lcolor, rcolor, panelfont, fontcolor, paneltext, icon, panelsize, vertalign) { 
 
    ctx.canvas.width = 320; 
 
    ctx.canvas.height = canvasHeight; 
 
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(80, 80); 
 
    ctx.lineTo(0, 80); 
 
    ctx.lineTo(0, 0); 
 
    ctx.lineTo(80, 0); 
 
    ctx.lineTo(80, 80); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = lcolor; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(320, 80); 
 
    ctx.lineTo(80, 80); 
 
    ctx.lineTo(80, 0); 
 
    ctx.lineTo(320, 0); 
 
    ctx.lineTo(320, 80); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = rcolor; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
    ctx.save(); 
 
    ctx.font = panelsize + "px '" + panelfont + "'"; 
 
    ctx.fillStyle = fontcolor; 
 
    ctx.textBaseline = "middle"; 
 
    ctx.fillText(paneltext, 90, vertalign); 
 
    ctx.restore(); 
 
    ctx.save(); 
 
    ctx.drawImage(imageObject, 0, 0); 
 
    ctx.restore(); 
 
} 
 
$(window).resize(function() { 
 
    var ww = $(window).width(); 
 
    if (ww < 700) { 
 
     $("#appContainer .input-col").removeClass("col-xs-4 col-xs-6"); 
 
     $("#appContainer .input-col").addClass("col-xs-12"); 
 
     console.log("Smaller"); 
 
    } else if (ww >= 700) { 
 
     console.log("Bigger"); 
 
    } 
 
}); 
 

 
function download() { 
 
    var fileName = $("#fileName").val().replace(/[^a-z0-9+\s]+/gi, ''); 
 
    var canvas = document.getElementById("canvas"), 
 
     ctx = canvas.getContext("2d"); 
 
    canvas.toBlob(function(blob) { 
 
     saveAs(blob, fileName + ".png"); 
 
    }); 
 
} 
 
window.onload = init();

Answer 1

Eine Möglichkeit wäre ein Ereignis-Listener auf die Änderung der Drop-Down-Box. Je nachdem, was der Dropdown-Wert ist, verbergen/zeigen Sie die Radioknöpfe nach Bedarf an.

Persönlich würde ich es selbst tun überspringen und eine Art View-Modell-Setup verwenden, die das alles für Sie tun wird. Ich habe kürzlich Knockout benutzt und habe das ziemlich gut gefunden.