複数選択可能なセレクトメニューのデータバインドの値の修正

###前提・実現したいこと
セレクトメニューから下記の東京、その他関東地区を選択し、それらを
外した時、divの値が空になるのでこちらをもとの旅行地を選択を表示させたいです。
###該当のソースコード

html
1<ul>
2	<li style="list-style: none">
3		<div class="sel1" ng-bind="location">旅行地を選択</div>
4		<select class="op1" multiple size="2" ng-model="location">
5		<option value="" disabled>旅行地を選択</option>
6		<option value="東京">東京</option>
7		<option value="その他関東地区">その他関東地区</option>
8		</select>
9	</li>
10<ul>

css
1ul {
2    position: relative;
3    padding: 0;
4    display: block;
5    z-index: 1;
6    vertical-align: top;
7    margin: 0 0 10px;
8}
9
10li {
11	position: relative;
12}
13.sel1{ 
14    margin: 0 auto;
15    margin-bottom: 20px;
16    width:90%;
17    display: block;
18    overflow: hidden;
19    text-overflow: ellipsis;
20	font-size: 14px;
21    white-space: nowrap;
22    box-sizing: border-box;
23    border: solid 1px #888888;
24	border-radius: 5px;
25    background-size: auto 30%;
26    padding: 4px 25px 4px 5px;
27    line-height: 20px;
28    height: 30px;
29    color: #3E3939;
30}
31.op1{
32	-moz-appearance: none;
33    -webkit-appearance: none;
34    appearance: none;
35    border-radius: 0;
36    border: 0;
37    margin: 0 5%;
38    padding: 0;
39    background: none transparent;
40    vertical-align: middle;
41    font-size: inherit;
42    color: inherit;
43    box-sizing: content-box;
44    width: 90%;
45    height: 30px;
46    overflow: hidden;
47    position: absolute;
48    top: 0;
49    opacity: 0;
50}
51

AngularJS
1<script>
2angular.module('App', [])
3  .controller('formController', ['$scope', function($scope) {
4    $scope.location = '勤務地を選択';
5  }]);
6</script>

###js
出来ればjqueryを使いたくないので、Angularでできるならそちらの方法も教えてほしいです。

行動規範の内容に同意します

回答4件

ベストアンサー

それらを外した時

とは具体的にどのような時なのでしょうか

以下のサンプルは複数選択して別の箇所をクリックしたときも$scope.locationの中身は失われていないように見えます.

リンク

上記リンク先を以下に変更しました。

html
1<html>
2 <head>
3  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>  
4  
5  <script>
6    angular.module('App', []).controller('formController', ['$scope', function($scope) {
7      // 初期値はブランク
8      $scope.location = '';
9      
10      // bindは条件で分岐
11      $scope.selectedLocation = function(){
12        return $scope.location === '' ? '旅行地を選択' : $scope.location;
13      }
14      
15      // 選択状態解除
16      $scope.clearLocation = function(){
17        $scope.location = '';
18      }
19      
20    }]);
21  </script>
22 </head>
23 <body ng-app="App">
24  <div ng-controller="formController">
25    <div class="sel1" ng-bind="selectedLocation()"></div>
26    <select class="op1" multiple size="2" ng-model="location">
27      <option value="" disabled>旅行地を選択</option>
28      <option value="東京">東京</option>
29      <option value="その他関東地区">その他関東地区</option>
30    </select>
31    <button ng-click="clearLocation()">未選択</button>
32  </div>
33 </body>
34</html>

投稿2016/11/01 03:01

編集2016/11/02 03:55

pinpikokun

総合スコア376

sauzar18

2016/11/01 05:12

選択を外したときでございます。データが空になります。

pinpikokun

2016/11/01 10:12

すみません、いまいち理解していないのですが ↑の「リンク」で「東京」と「その他関東地区」を選択すると画面上部に「東京,その他関東地区」と表示されて、そこからどこをクリックしたときに（選択を外した時）データが空になるのでしょうか。

sauzar18

2016/11/02 02:55

<div></div>のなかにデータバインドされると思うのですが、初期値は<div>旅行地を選択</div>セレクトメニューから東京を選択したとき<div>東京</div>、「東京」と「その他関東地区」両方選択したとき<div>東京,その他関東地区</div>になると思うのですが、そのあとセレクトメニューの選択のチェックを「東京」と「その他関東地区」両方外した状態になると<div></div>の中になにも表示されていない状態になりますので、ここをもとの「旅行地を選択」に戻したいということです。

pinpikokun

2016/11/02 03:51

理解しました。上記内容を受けて回答に追記しました。

行動規範の内容に同意します

jquery.multiple.select.js
など利用してプレースホルダを表示してやるのはいかがでしょうか？

投稿2016/10/28 07:04

yambejp

総合スコア114814

sauzar18

2016/10/28 07:18

スマートフォンでのセレクトメニューの拡大表示をのこしたまま表記を変えたいので恐らくmultiple.select.jsだとそちらが出来なくなると思います。

yambejp

2016/10/28 07:22

根本的なところに戻って恐縮ですが、そもそも、selectのmultiple機能は使い勝手がわるいので、ul-liでチェックボックスを並べて、表示領域をスクロールで処理するのがよいような気がします

sauzar18

2016/10/28 07:34

そちらだとスマフォの場合、全画面に拡大されないため、selectで試行錯誤しております。

行動規範の内容に同意します

javascript
1$('select')on('change', function(){
2	var count = $(this).val().length;
3	$('span').html(count+'件選択中');
4});

span内に代入する前提で。
試してないですが・・

すみません、「"複数選択できます"」と出したいのですね・・勘違いしてました。

投稿2016/10/28 07:02

編集2016/10/28 07:04

takepieee

総合スコア686

ごめんなさい、スマートフォンを見落としていました・・・。

投稿2016/10/28 06:50

編集2016/10/28 06:51

s.t.

総合スコア2021

sauzar18

2016/10/28 06:52

複数選択は出来ているのですが選択後〇件選択と表記されてしまうのでそちらを改善したいです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

複数選択可能なセレクトメニューのデータバインドの値の修正

関連した質問