常連

注目の的

社会貢献

質問力

演算子と制御文を一通り終え関数に入ったのですがjsのreturnの使い方がいまいち理解できません

```lang-＜javascript＞
function menseki(r){
  var m = 3.14 * r * r;
  return m;
}ｗ

var m = menseki(5);
```

自分なりに考えてみたのですが、処理を終えたり新しい処理を始める前にreturnを使うのでしょうか...

それともbreakやcontinueのように一定の処理を飛ばしたり無効にするためにつかうのかわかりません値を返すというのが理解できません。。どこに返しているのですか？

初歩的なことを質問してすみません。。
どなたか教えてください

javascriptのreturnの使い道が理解できません...

slick.js
http://kenwheeler.github.io/slick/

ドットを表示して使用していますが、
スライドが1つしかない時は非表示にしたいと考えています。

window.onloadで要素の数を数えて削除するような事も検討しましたが、
もっとスマートな方法はありますでしょうか？

slick.jsにおけるドットを1つだけの時は非表示にしたい

1つ目のセレクトボックスで選んだ値に合わせて、2つ目のセレクトボックスに表示される選択肢が変わるセレクトボックスを下記の記事を参考に作りました。
https://try-m.co.jp/blog/web-create/936/

それを同じページに２つ設置したいので、1つ目のセレクトボックスを選択したときに、
選択をしたセレクトボックスの下にある２つ目のセレクトボックスのみと連動するように変更したいのですが、
セレクトボックス１の２つ目とセレクトボックス２の２つ目のoptionのテキストの値をそれぞれ取得して、どう
出し分けたらいいのか分からず困っています。

```html

<div class="selectDiv">
  <select class="parent" name="type">
    <option value="">洋服のタイプを選択</option>
    <option value="タイプA">タイプA</option>
    <option value="タイプB">タイプB</option>  
  </select>
</div>
<div class="selectDiv">
  <select class="childen" name="size">
    <option value="">サイズを選択</option>
    <option value="M" data-val="タイプA">M</option>
    <option value="L" data-val="タイプA">L</option>
    <option value="子供用M" data-val="タイプB">子供用M</option>
    <option value="子供用L" data-val="タイプB">子供用L</option>
  </select>
</div>


<div class="selectDiv">
  <select class="parent" name="design">
    <option value="">バッグのデザインを選択</option>
    <option value="デザインA">デザインA</option>
    <option value="デザインB">デザインB</option>  
  </select>
</div>
<div class="selectDiv">
  <select class="childen" name="color">
    <option value="">色を選択</option>
    <option value="赤" data-val="デザインA">赤</option>
    <option value="青" data-val="デザインA">青</option>
    <option value="緑" data-val="デザインB">緑</option>
    <option value="黄" data-val="デザインB">黄</option>
  </select>
</div>
```

```jQuery
var children = $('.childen');
var original = children.html();

$('.parent').change(function() {
  var thisChildren = $(this).parent().next().children(children);
  var val1 = $(this).val();
  
  thisChildren.html(original).find('option').each(function() {
    var val2 = $(this).data('val');

    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }
  });

  if ($(this).val() == "") {
    $thisChildren.attr('disabled', 'disabled');
  } else {
    $thisChildren.removeAttr('disabled');
  }
});
```

2つのセレクトボックスを連動させたものを同じページで複数使いたい

### 前提・実現したいこと

jqueryで2つのセレクトボックスを連動させ、選択項目の表示・非表示を行いたいと思っています。

具体的には、

選択肢１（A、B）
選択肢２（a、b、c、d）

選択肢１でAを選択すると、選択肢２では全て選択可能。
選択肢１でBを選択すると、選択肢２ではa、b、cのみ選択可能。
逆に、選択肢２でdを選択すると、選択肢１ではAのみ選択可能になる。

といったものにしたいのですが、
いくら調べても、data-valを使い選択肢の親子関係を作るものしか対処方法が見つからず、
どう実装すればいいか、悩んでおります。


何か方法を知っている方、アイデアのある方、
コメントいただけますと幸いです。

よろしくお願いいたします。

2つのセレクトボックスを連動させ、選択項目の表示・非表示を行いたい（親子関係なし）

### 前提・実現したいこと

selectボックスを二つ用意し、1つ目の選択肢によって2つ目の選択肢が自動的に切り替わるようにしたいです。
かつ、2つ目の選択肢の項目が1つなら、自動的に表示されるようにしたいです。
例えば、下記のソースで言うと、
県の選択で、[北海道]を選ぶと、市の選択は[札幌市]と[釧路市]なので、市のセレクトボックスの初期表示は、[-- 選択--]。[青森]の場合は、[青森市]だけなので、初期表示が[青森市]となるようにしたいです。

選択肢が切り替わるようには下記サイトを参考にしました。
https://try-m.co.jp/blog/web-create/936/


### 試したこと
eachでインデックスされている数が1つだったら
valueの値を変えるという考えでできるのかなと思うのですが、
その書き方がわかりません…。
お手数ですが、よろしくお願いいたします。

### 該当のソースコード

```html
<select  class="parent">
	<option value="" selected="selected" label="-- 選択 --">-- 選択--</option>
	<option value="北海道">北海道</option>
	<option value="青森">青森</option>
	<option value="岩手">岩手</option>
</select>

<select class="child" disabled>
	<option value="" label="-- 選択2 --" selected="selected">-- 選択2 --</option>
	<option value="01" data-val="北海道">札幌市</option>
	<option value="02" data-val="北海道">釧路市</option>
	<option value="03" data-val="青森">青森市</option>
	<option value="04" data-val="岩手">盛岡市</option>
</select>



```
```jQuery

$(function() {
var $children = $('.child'); //市の要素を変数に入れます。
var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく

$('.parent').change(function() {
   //選択された都道府県のvalueを取得し変数に入れる
  var val1 = $(this).val();
   //削除された要素をもとに戻すため.html(original)を入れておく
  $children.html(original).find('option').each(function(i, val) {
    var val2 = $(this).data('val'); //data-valの値を取得
     //valueと異なるdata-valを持つ要素を削除
    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }
//？インデックスされた数が1の場合は、valueの値をいれる？
    if (i == 1) {
      var val3 = val2.val();
      $('.pairc').val(val3);
    }
   });
   //地方側のselect要素が未選択の場合、都道府県をdisabledにする
  if ($(this).val() == "") {
    $children.attr('disabled', 'disabled');
  } else {
    $children.removeAttr('disabled');
  }
 });
```

2つのselectボックスを連動させ、2つ目の選択しが1つなら自動的に表示させたい

以下状況で角丸の線がジャギーしてしまいます。

・chorme（最新）
・黒ベタ塗り背景
・白ボーダー線の角丸（正円）

##htmlコード
```
<div class="wrapepr-btns">
	<ul class="list-btns">
		<li>
			<div class="button-circle">
				<a href="#" target="_blank">
					<span class="icon-font">###</span>
				</a>
			</div>
		</li>
		<li>
			<div class="button-circle">
				<a href="#" target="_blank">
					<span class="icon-font">###</span>
				</a>
			</div>
		</li>
	</ul>
</div>

```

###CSSコード
```
.wrapepr-btns {
 background: #000000;
 width: 100%;
 height: 100%;
}
.list-btns > li {
 display: inline-block;
 margin-left: 15px;
}
ul.list-btns> li > div.button-circle { 
 width: 50px;
 height: 50px;
 text-align: center;
 border: 1px solid #ffffff;
 border-radius: 50%;
}
ul.list-btns> li > div.button-circle a {
 display: inline-block;
 width: 100%;
 height: 100%;
}

```
角丸のborderを2pxにすると滑らかになっているようは見えますが、
1pxですとジャギーがひどいです。
背景が黒もしくは暗めの場合のみそう見えます。

同じような経験のあるかた、
もしくは上手いテクニックをご存知の方
教えてきた頂きますと幸いです。

Chromeで角丸（radius）がジャギーしてしまう

質問です。
下記コードで、transformの値に変数toggleWidthの値を入れたいのですが、
そのまま変数名を入れることはできず、連結方法がわかりません。

どなたかアドバイスをいただけないでしょうか。
よろしくお願いいたします。

```
var toggleWidth = parseInt($nav.width());

$motionArea.css('transform', 'translateX(  px)');
```